EmptyState
EmptyState
はリソースが空または利用できない場合に表示するために使用されるコンポーネントです。
インポート
import {EmptyState,EmptyStateIndicator,EmptyStateTitle,EmptyStateDescription,} from "@yamada-ui/react"
EmptyState
: 子要素を表示するラッパーコンポーネントです。EmptyStateIndicator
: セクションのアイコンを表示するコンポーネントです。EmptyStateTitle
: セクションのタイトルを表示するコンポーネントです。EmptyStateDescription
: セクションの説明を表示するコンポーネントです。
EmptyStateIndicator
, EmptyStateTitle
とEmptyStateDescription
は、省略することができます。
使い方
編集可能な例
<EmptyState> <EmptyStateIndicator> <ShoppingCartIcon /> </EmptyStateIndicator> <EmptyStateTitle>Your cart is empty</EmptyStateTitle> <EmptyStateDescription> Explore our products and add items to your cart </EmptyStateDescription> </EmptyState>
または、title
, indicator
, description
を使用しても子要素を省略することもできます。
編集可能な例
<EmptyState description="Explore our products and add items to your cart" indicator={<ShoppingCartIcon />} title="Your cart is empty" />
サイズを変更する
編集可能な例
<VStack> <For each={["sm", "md", "lg"]}> {(size, index) => ( <EmptyState key={index} size={size} description="Explore our products and add items to your cart" indicator={<ShoppingCartIcon />} title="Your cart is empty" /> )} </For> </VStack>
子要素を追加する
編集可能な例
<EmptyState description="Explore our products and add items to your cart" indicator={<ShoppingCartIcon />} title="Your cart is empty" > <Button>Back to home</Button> </EmptyState>
GitHubでこのページを編集する