Stat
Statは、数値やデータをボックス内に表示するために使用されます。
- Total Page Views
- 1,993,818
<Stat.Root>
<Stat.Label>Total Page Views</Stat.Label>
<Stat.Value>1,993,818</Stat.Value>
<Stat.HelperMessage>
<Stat.Icon type="increase" />
21% more than last month
</Stat.HelperMessage>
</Stat.Root>
使い方
import { Stat } from "@yamada-ui/react"
import { Stat } from "@/components/ui"
import { Stat } from "@workspaces/ui"
<Stat.Root>
<Stat.Label />
<Stat.Value />
<Stat.Unit />
<Stat.HelperMessage />
<Stat.Icon />
</Stat.Root>
Stat.Label, Stat.Value, Stat.HelperMessageとStat.Iconは、省略することができます。サイズを変更する
- Time to complete
- 8hr18min
- Time to complete
- 8hr18min
- Time to complete
- 8hr18min
- Time to complete
- 8hr18min
<VStack>
<For each={["xs", "sm", "md", "lg"]}>
{(size, index) => (
<Stat.Root
key={index}
size={size}
label="Time to complete"
value={
<>
8<Stat.Unit>hr</Stat.Unit>
18<Stat.Unit>min</Stat.Unit>
</>
}
/>
)}
</For>
</VStack>
カラースキームを変更する
- Total Likes
- 818K
- Total Likes
- 818K
<VStack>
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<Stat.Root
key={index}
colorScheme={colorScheme}
helperMessage="21% more than last month"
label="Total Likes"
value="818K"
/>
)}
</For>
</VStack>
コンテンツを中央寄せにする
コンテンツを中央寄せにする場合は、centerContentをtrueに設定します。
- Downloads
- 18K
<Stat.Root
centerContent
helperMessage="From August 1 to August 18"
icon="increase"
label="Downloads"
value="18K"
/>
単位を表示する
- Time to complete
- 8hr18min
<Stat.Root>
<Stat.Label>Time to complete</Stat.Label>
<Stat.Value>
8<Stat.Unit>hr</Stat.Unit>
18<Stat.Unit>min</Stat.Unit>
</Stat.Value>
</Stat.Root>
減少のアイコンを表示する
減少のアイコンを表示する場合は、Stat.Iconのtypeにdecreaseを設定します。
- Total Page Views
- 1,993,818
<Stat.Root>
<Stat.Label>Total Page Views</Stat.Label>
<Stat.Value>1,993,818</Stat.Value>
<Stat.HelperMessage>
<Stat.Icon type="decrease" />
21% more than last month
</Stat.HelperMessage>
</Stat.Root>
Props
アクセシビリティ
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
Stat.Icon | aria-label | typeに"increase"が設定されている場合は"増加"を設定し、"decrease"が設定されている場合は"減少"を設定します。 |