Stat
Statは、数値やデータをボックス内に表示するために使用されます。
インポート
import {Stat,StatLabel,StatNumber,StatHelperMessage,StatIcon,} from "@yamada-ui/react"
Stat: 数値やデータを制御するラッパーコンポーネントです。StatLabel: 数値やデータのラベルを表示するコンポーネントです。StatNumber: 数値やデータを表示するコンポーネントです。StatHelperMessage: 数値やデータの補足を表示するコンポーネントです。StatIcon: 数値やデータの状況を表示するアイコンのコンポーネントです。
StatLabel, StatNumber, StatHelperMessageとStatIconは、省略することができます。
使い方
編集可能な例
<Stat label="Total Page Views" number="1,993,818" icon="increase" helperMessage="21% more than last month" />
または、StatLabelやStatNumberなどを省略しない場合は、このように記述します。
編集可能な例
<Stat> <StatLabel>Total Page Views</StatLabel> <StatNumber>1,993,818</StatNumber> <StatHelperMessage> <StatIcon type="increase" /> 21% more than last month </StatHelperMessage> </Stat>
カラースキームを変更する
編集可能な例
<Wrap gap="md"> <For each={["secondary", "green"]}> {(colorScheme, index) => ( <Stat key={index} colorScheme={colorScheme} label="Total Page Views" number="1,993,818" icon="increase" helperMessage="21% more than last month" /> )} </For> </Wrap>
コンテンツを中央寄せにする
コンテンツを中央寄せにする場合は、centerContentをtrueに設定します。
編集可能な例
<Stat label="Downloads" number="18K" icon="increase" helperMessage="From August 1 to August 18" centerContent />
減少のアイコンを表示する
減少のアイコンを表示するには、StatIconのtypeにdecreaseを設定します。
編集可能な例
<Wrap gap="md"> <Stat label="Total Page Views" number="1,993,818" icon="decrease" helperMessage="21% more than last month" /> <Stat> <StatLabel>Total Page Views</StatLabel> <StatNumber>1,993,818</StatNumber> <StatHelperMessage> <StatIcon type="decrease" /> 21% more than last month </StatHelperMessage> </Stat> </Wrap>
GitHubでこのページを編集する