Stats 统计数据

在组织的块中显示统计数据和数据,用于仪表板和分析。

导入

import { Stats } from 'asterui'

示例

基础统计

带有标题和值的简单统计。

</>

Total Page Views

89,400

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Page Views" value="89,400" />
      </Stats>
    )
}

export default App

带描述

使用 desc 属性添加描述。

</>

Downloads

31K

Jan 1st - Feb 1st

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
      </Stats>
    )
}

export default App

多个统计

水平显示多个统计。

</>

Total Users

4,200

↗︎ 400 (22%)

New Users

1,200

↘︎ 90 (14%)

New Registers

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Users" value="1,200" desc="↘︎ 90 (14%)" />
        <Stats.Stat title="New Registers" value="4,200" desc="↗︎ 400 (22%)" />
      </Stats>
    )
}

export default App

带图标

使用 figure 属性添加图标。

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'
import { InformationCircleIcon, AdjustmentsVerticalIcon } from '@aster-ui/icons'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          figure={<InformationCircleIcon size={32} />}
          title="Downloads"
          value="31K"
          desc="Jan 1st - Feb 1st"
        />
        <Stats.Stat
          figure={<AdjustmentsVerticalIcon size={32} />}
          title="New Users"
          value="4,200"
          desc="↗︎ 400 (22%)"
        />
      </Stats>
    )
}

export default App

彩色值

使用 className 设置彩色值。

</>

Account balance

$89,400

21% more than last month

Current balance

$12,721

12% less than last month

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value={<span className="text-primary">$89,400</span>}
          desc="21% more than last month"
        />
        <Stats.Stat
          title="Current balance"
          value={<span className="text-secondary">$12,721</span>}
          desc="12% less than last month"
        />
      </Stats>
    )
}

export default App

垂直布局

垂直堆叠统计。

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

New Registers

1,200

↘︎ 90 (14%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats vertical className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
        <Stats.Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
      </Stats>
    )
}

export default App

带操作

使用 actions 属性添加按钮。

</>

Account balance

$89,400

Add funds

import { Stats, Button } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value="$89,400"
          actions={
            <Button size="sm" color="primary">
              Add funds
            </Button>
          }
        />
      </Stats>
    )
}

export default App

API

Stats

属性	描述	类型	默认值
children	要显示的统计项目	React.ReactNode	-
vertical	垂直堆叠统计	boolean	false
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

Stats.Stat

属性	描述	类型	默认值
title	统计标题	React.ReactNode	-
value	统计值	React.ReactNode	-
desc	描述文本	React.ReactNode	-
figure	图标或图像图形	React.ReactNode	-
actions	操作按钮或元素	React.ReactNode	-
className	额外的 CSS 类	string	-
data-testid	用于测试的测试 ID	string	-

可访问性

• 统计标题的语义标题结构
• 值可以包含用于上下文的 ARIA 标签
• 使用图像时图形具有适当的 alt 文本
• 操作按钮可通过键盘访问