logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Unit
Animated number
In Card
Countdown
API
Design Token

Statistic

  • SegmentedTable

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    Display statistic number.

    When To Use

    • When want to highlight some data.
    • When want to display statistic data with description.

    Examples

    Basic

    Simplest Usage.

    expand codeexpand code
    Animated number

    Animated number with react-countup.

    expand codeexpand code
    Countdown

    Countdown component.

    expand codeexpand code
    Unit

    Add unit through prefix and suffix.

    expand codeexpand code
    In Card

    Display statistic data in Card.

    expand codeexpand code

    API

    Common props ref:Common props

    Statistic

    PropertyDescriptionTypeDefaultVersion
    decimalSeparatorThe decimal separatorstring.
    formatterCustomize value display logic(value) => ReactNode-
    groupSeparatorGroup separatorstring,
    loadingLoading status of Statisticbooleanfalse4.8.0
    precisionThe precision of input valuenumber-
    prefixThe prefix node of valueReactNode-
    suffixThe suffix node of valueReactNode-
    titleDisplay titleReactNode-
    valueDisplay valuestring | number-
    valueStyleSet value section styleCSSProperties-

    Statistic.Countdown

    PropertyDescriptionTypeDefaultVersion
    formatFormat as dayjsstringHH:mm:ss
    prefixThe prefix node of valueReactNode-
    suffixThe suffix node of valueReactNode-
    titleDisplay titleReactNode-
    valueSet target countdown timenumber | dayjs-
    valueStyleSet value section styleCSSProperties-
    onFinishTrigger when time's up() => void-
    onChangeTrigger when time's changing(value: number) => void-4.16.0

    Design Token

    Component Token

    Global Token

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

    Active Users
    Account Balance (CNY)
    Countdown
    48:00:29
    Million Seconds
    48:00:29:989
    Day Level
    2 天 0 时 0 分 29 秒
    Countdown
    00:00:09
    Feedback
    1,128
    Unmerged
    93/ 100
    Active
    11.28%
    Idle
    9.30%