Statistic 统计数值

展示指标数值和倒计时。

基础用法

总收入

¥12,856.80

增长率

12.5%

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

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 首屏使用的剩余毫秒数，客户端挂载后按截止时间更新。

类型与交互

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

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

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

#Statistic 统计数值

#基础用法

#倒计时

#Statistic API

#Countdown API

#类型与交互

Statistic 统计数值

基础用法

倒计时

Statistic API

Countdown API

类型与交互