//
Visual representation of a quantity.
bun add xiod-ui1import {2 Meter,3 MeterIndicator,4 MeterLabel,5 MeterTrack,6 MeterValue7} from "xiod-ui/meter";1<Meter>2 <MeterLabel />3 <MeterIndicator />4 <MeterTrack />5 <MeterValue />6</Meter>| Prop | Type | Default | Description |
|---|---|---|---|
aria-valuetext | string| undefined | - | A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter. |
format | NumberFormatOptions| undefined | - | Options to format the value. |
getAriaValueText | ((formattedValue: string, value: number) => string)| undefined | - | A function that returns a string value that provides a human-readable text alternative for `aria-valuenow`, the current value of the meter. |
locale | LocalesArgument | - | The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. |
max | number| undefined | 100 | The maximum value |
min | number| undefined | 0 | The minimum value |
valueReq | number | - | The current value. |
className | string| ((state: MeterRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MeterRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MeterRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: MeterIndicatorState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MeterIndicatorState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MeterIndicatorState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: MeterLabelState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MeterLabelState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MeterLabelState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
className | string| ((state: MeterTrackState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MeterTrackState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: MeterTrackState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| Prop | Type | Default | Description |
|---|---|---|---|
style | CSSProperties| ((state: MeterValueState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
className | string| ((state: MeterValueState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, MeterValueState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |