logoMogu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
单位
动画效果
在卡片中使用
倒计时
API

Statistic统计数值

Segmented分段控制器Table表格

展示统计数值。

何时使用

  • 当需要突出某个或某组数字时。
  • 当需要展示带描述的统计类数据时使用。

代码演示

Active Users
112,893
Account Balance (CNY)
112,893.00
Active Users

基本

简单的展示。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Button, Col, Row, Statistic } from 'mogud';

const App: React.FC = () => (
  <Row gutter={16}>
    <Col span={12}>
      <Statistic title="Active Users" value={112893} />
    </Col>
    <Col span={12}>
      <Statistic title="Account Balance (CNY)" value={112893} precision={2} />
      <Button style={{ marginTop: 16 }} type="primary">
        Recharge
      </Button>
    </Col>
    <Col span={12}>
      <Statistic title="Active Users" value={112893} loading />
    </Col>
  </Row>
);

export default App;
Active Users
Account Balance (CNY)
动画效果

给数值添加动画进入效果，需要配合 react-countup。

expand codeexpand code
TypeScript
JavaScript
import { Col, Row, Statistic } from 'mogud';
import React from 'react';
import CountUp from 'react-countup';

const formatter = (value: number) => <CountUp end={value} separator="," />;

const App: React.FC = () => (
  <Row gutter={16}>
    <Col span={12}>
      <Statistic title="Active Users" value={112893} formatter={formatter} />
    </Col>
    <Col span={12}>
      <Statistic title="Account Balance (CNY)" value={112893} precision={2} formatter={formatter} />
    </Col>
  </Row>
);

export default App;
Countdown
48:00:29
Million Seconds
48:00:29:810
Day Level
2 天 0 时 0 分 29 秒
Countdown
00:00:09
倒计时

倒计时组件。

expand codeexpand code
TypeScript
JavaScript
import type { CountdownProps } from 'mogud';
import { Col, Row, Statistic } from 'mogud';
import React from 'react';

const { Countdown } = Statistic;

const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK

const onFinish: CountdownProps['onFinish'] = () => {
  console.log('finished!');
};

const onChange: CountdownProps['onChange'] = (val) => {
  if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
    console.log('changed!');
  }
};

const App: React.FC = () => (
  <Row gutter={16}>
    <Col span={12}>
      <Countdown title="Countdown" value={deadline} onFinish={onFinish} />
    </Col>
    <Col span={12}>
      <Countdown title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />
    </Col>
    <Col span={24} style={{ marginTop: 32 }}>
      <Countdown title="Day Level" value={deadline} format="D 天 H 时 m 分 s 秒" />
    </Col>
    <Col span={12}>
      <Countdown title="Countdown" value={Date.now() + 10 * 1000} onChange={onChange} />
    </Col>
  </Row>
);

export default App;
Feedback
1,128
Unmerged
93/ 100
单位

通过前缀和后缀添加单位。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { LikeOutlined } from '@ant-design/icons';
import { Col, Row, Statistic } from 'mogud';

const App: React.FC = () => (
  <Row gutter={16}>
    <Col span={12}>
      <Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
    </Col>
    <Col span={12}>
      <Statistic title="Unmerged" value={93} suffix="/ 100" />
    </Col>
  </Row>
);

export default App;
Active
11.28%
Idle
9.30%
在卡片中使用

在卡片中展示统计数值。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'mogud';

const App: React.FC = () => (
  <Row gutter={16}>
    <Col span={12}>
      <Card bordered={false}>
        <Statistic
          title="Active"
          value={11.28}
          precision={2}
          valueStyle={{ color: '#3f8600' }}
          prefix={<ArrowUpOutlined />}
          suffix="%"
        />
      </Card>
    </Col>
    <Col span={12}>
      <Card bordered={false}>
        <Statistic
          title="Idle"
          value={9.3}
          precision={2}
          valueStyle={{ color: '#cf1322' }}
          prefix={<ArrowDownOutlined />}
          suffix="%"
        />
      </Card>
    </Col>
  </Row>
);

export default App;

API

Statistic

参数说明类型默认值版本
decimalSeparator设置小数点string.
formatter自定义数值展示(value) => ReactNode-
groupSeparator设置千分位标识符string,
loading数值是否加载中booleanfalse4.8.0
precision数值精度number-
prefix设置数值的前缀ReactNode-
suffix设置数值的后缀ReactNode-
title数值的标题ReactNode-
value数值内容string | number-
valueStyle设置数值区域的样式CSSProperties-

Statistic.Countdown

参数说明类型默认值版本
format格式化倒计时展示，参考 dayjsstringHH:mm:ss
prefix设置数值的前缀ReactNode-
suffix设置数值的后缀ReactNode-
title数值的标题ReactNode-
value数值内容number | dayjs-
valueStyle设置数值区域的样式CSSProperties-
onFinish倒计时完成时触发() => void-
onChange倒计时时间变化时触发(value: number) => void-4.16.0