> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/components/statistic.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/llms-full.txt.

# Statistic 统计数值

展示指标数值和倒计时。

## 基础用法


总收入

¥12,856.80

增长率

12.5%

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/statistic/basic.tsx"
import { Space, Statistic } from '@ifhover/leaf-ui';

import { ArrowUp } from 'lucide-react';

export function StatisticBasic() {
  return (
    <Space size={32} wrap>
      <Statistic title={'总收入'} value={12856.8} precision={2} prefix="¥" />
      <Statistic
        title={'增长率'}
        value={12.5}
        precision={1}
        prefix={<ArrowUp size={20} />}
        suffix="%"
      />
    </Space>
  );
}
```

展开代码

## 倒计时


距离活动开始

01:00:00

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/statistic/basic.tsx"
import { Countdown } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function StatisticCountdown() {
  const [deadline] = useState(() => Date.now() + 3600000);
  return <Countdown title={'距离活动开始'} value={deadline} />;
}
```

展开代码

## Statistic API

| 属性          | 类型                                       | 默认值    | 说明          |
| ----------- | ---------------------------------------- | ------ | ----------- |
| `title`     | `ReactNode`                              | —      | 标题内容。       |
| `value`     | `number \| string`                       | —      | 必需。受控值。     |
| `precision` | `number`                                 | —      | 小数位数。       |
| `grouping`  | `boolean`                                | `true` | 启用本地化数字分组。  |
| `prefix`    | `ReactNode`                              | —      | 前置内容。       |
| `suffix`    | `ReactNode`                              | —      | 后置内容。       |
| `formatter` | `(value: number \| string) => ReactNode` | —      | 自定义指标数值的展示。 |
| `loading`   | `boolean`                                | —      | 展示加载状态。     |

## Countdown API

| 属性                 | 类型                            | 默认值          | 说明                                |
| ------------------ | ----------------------------- | ------------ | --------------------------------- |
| `title`            | `ReactNode`                   | —            | 标题内容。                             |
| `prefix`           | `ReactNode`                   | —            | 前置内容。                             |
| `suffix`           | `ReactNode`                   | —            | 后置内容。                             |
| `loading`          | `boolean`                     | —            | 展示加载状态。                           |
| `value`            | `number \| Date`              | —            | 必需。截止时间的 Date 或毫秒时间戳。             |
| `format`           | `string`                      | `'HH:mm:ss'` | DD、HH、mm、ss、SSS 格式，其中 HH 可展示累计小时。 |
| `onFinish`         | `() => void`                  | —            | 完成时调用一次。                          |
| `onChange`         | `(remaining: number) => void` | —            | 值发生变化时调用。                         |
| `initialRemaining` | `number`                      | —            | SSR 首屏使用的剩余毫秒数，客户端挂载后按截止时间更新。     |

## 类型与交互

组装可复用配置时，可导入对应的属性和数据类型。

```ts
import type { StatisticProps, CountdownProps } from '@ifhover/leaf-ui';
```

为仅展示图标的操作提供可访问名称。交互控件支持键盘操作，并跟随 ConfigProvider 的主题和减少动画设置。