The <ChannelValue> component is used to display a channel value (and units). This component abstracts the styles used to display the channel and units as well as an optional inline icon. These are used as part of the <Hero> component, but can also be used inline (e.g., in a list).
import { ChannelValue } from '@pxblue/react-components';
...
<ChannelValue value={100} units={'%'} icon={<Icon/>} />| Prop Name | Description | Type | Required | Default |
|---|---|---|---|---|
| color | The color of the font | string |
no | 'inherit' |
| classes | Style overrides | ChannelValueClasses |
no | |
| fontSize | The size of the font | string | number |
no | 'inherit' |
| icon | The inline icon to display | JSX.Element |
no | |
| prefix | Show units before the value | boolean |
no | false |
| units | The text to display for the units (light text) | string |
no | |
| value | The value (bold text) to display | string | number |
yes |
Any other props supplied will be provided to the root element (span).
You can override the classes used by PX Blue by passing a classes prop. It supports the following keys:
| Name | Description |
|---|---|
| root | Styles applied to the root element |
| icon | Styles applied to the icon element |
| units | Styles applied to the units element |
| value | Styles applied to the value element |