Importimport { Statistic } from 'antd'; |
contributors
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the Statistic component. Supports object or function. | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | |
| decimalSeparator | The decimal separator | string | . | |
| formatter | Customize value display logic | (value) => ReactNode | - | |
| groupSeparator | Group separator | string | , | |
| loading | Loading status of Statistic | boolean | false | 4.8.0 |
| precision | The precision of input value | number | - | |
| prefix | The prefix node of value | ReactNode | - | |
| styles | Customize inline style for each semantic structure inside the Statistic component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | |
| suffix | The suffix node of value | ReactNode | - | |
| title | Display title | ReactNode | - | |
| value | Display value | string | number | - | |
Set value section style, please use styles.content instead | CSSProperties | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| format | Format as dayjs | string | HH:mm:ss | |
| prefix | The prefix node of value | ReactNode | - | |
| suffix | The suffix node of value | ReactNode | - | |
| title | Display title | ReactNode | - | |
| value | Set target countdown time | number | - | |
| valueStyle | Set value section style | CSSProperties | - | |
| onFinish | Trigger when time's up | () => void | - | |
| onChange | Trigger when time's changing | (value: number) => void | - | 4.16.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| type | Timer direction, count down or count up | countdown | countup | - | |
| format | Format as dayjs | string | HH:mm:ss | |
| prefix | The prefix node of value | ReactNode | - | |
| suffix | The suffix node of value | ReactNode | - | |
| title | Display title | ReactNode | - | |
| value | Target time for countdown, or start time for countup (timestamp in ms) | number | - | |
| valueStyle | Set value section style | CSSProperties | - | |
| onFinish | Trigger when time's up, only called when type is countdown | () => void | - | |
| onChange | Trigger when time's changing | (value: number) => void | - |
Statistic supports root, header, title, content, value, prefix, and suffix semantic DOM nodes.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| contentFontSize | Content font size | string | number | 24 |
| titleFontSize | Title font size | number | 14 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| padding | Control the padding of the element. | number | 16 |