Stat

分类：

other

日期:

2022-1-14

标签：

chakra

As the name implies, the Stat component is used to display some statistics.

View source View theme source @chakra-ui/stat

Import#

import {
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  StatGroup,
} from '@chakra-ui/react';

Basic Usage#

<Stat>
  <StatLabel>Collected Fees</StatLabel>
  <StatNumber>£0.00</StatNumber>
  <StatHelpText>Feb 12 - Feb 28</StatHelpText>
</Stat>

Stat with Indicator#

<StatGroup>
  <Stat>
    <StatLabel>Sent</StatLabel>
    <StatNumber>345,670</StatNumber>
    <StatHelpText>
      <StatArrow type="increase" />
      23.36%
    </StatHelpText>
  </Stat>

  <Stat>
    <StatLabel>Clicked</StatLabel>
    <StatNumber>45</StatNumber>
    <StatHelpText>
      <StatArrow type="decrease" />
      9.05%
    </StatHelpText>
  </Stat>
</StatGroup>

Props#

StatLabel, StatHelpText, StatNumber composes Text component.
StatArrow composes Icon component.
Stat and StatGroup composes Box component.

`colorScheme`

Color Schemes Stat

(string & {})

`size`

"md"

`variant`

Variants Stat

string