Stat

Statは、数値やデータをボックス内に表示するために使用されます。

Total Page Views: 1,993,818; 21% more than last month

<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; 21% more than last month

Total Likes: 818K; 21% more than last month

<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; From August 1 to August 18

<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; 21% more than last month

<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

Stat.Root

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xs"` The size of the component.
`centerContent`	`false`	`boolean` If `true`, container will center its children regardless of their width.
`helperMessage`	-	`ReactNode` The stat helper message to use.
`helperMessageProps`	-	`StatHelperMessageProps` Props for stat helper message component.
`icon`	-	`StatIconProps["type"]` The stat icon to use.
`iconProps`	-	`Omit<StatIconProps, "type">` Props for stat icon component.
`label`	-	`ReactNode` The stat label to use.
`labelProps`	-	`StatLabelProps` Props for stat label component.
`value`	-	`ReactNode` The stat value to use.
`valueProps`	-	`StatValueProps` Props for stat value component.

Stat.HelperMessage

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Stat.Icon

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`type`	`"increase"`	`"decrease" \| "increase"` The type of the icon.

Stat.Label

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Stat.Unit

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Stat.Value

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

アクセシビリティ

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`Stat.Icon`	`aria-label`	`type`に`"increase"`が設定されている場合は`"増加"`を設定し、`"decrease"`が設定されている場合は`"減少"`を設定します。

類似のコンポーネント

Tableは、列のソートや行の選択やクリックイベント機能を備えたテーブルのコンポーネントです。

NativeTableは、データを効率的に整理して表示するコンポーネントです。

PieChartは、複数のデータを比較するためのパイチャートを描画するコンポーネントです。

RadialChartは、複数のデータを比較するための放射状チャートを描画するコンポーネントです。

RadarChartは、複数のデータを比較するためのレーダーチャートを描画するコンポーネントです。

DonutChartは、複数のデータを比較するためのドーナツチャートを描画するコンポーネントです。

AreaChartは、複数のデータを比較するためのエリアチャートを描画するコンポーネントです。

ComposedChartは、複数のデータを比較するための複合チャートを描画するコンポーネントです。

使用しているコンポーネント・フック

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。