EmptyState
EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。
Your cart is empty
Explore our products and add items to your cart
<EmptyState.Root
description="Explore our products and add items to your cart"
indicator={<ShoppingCartIcon />}
title="Your cart is empty"
/>
使い方
import { EmptyState } from "@yamada-ui/react"
import { EmptyState } from "@/components/ui"
import { EmptyState } from "@workspaces/ui"
<EmptyState.Root>
<EmptyState.Indicator />
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Root>
サイズを変更する
Your cart is empty
Explore our products and add items to your cart
Your cart is empty
Explore our products and add items to your cart
Your cart is empty
Explore our products and add items to your cart
<VStack>
<For each={["sm", "md", "lg"]}>
{(size, index) => (
<EmptyState.Root
key={index}
size={size}
description="Explore our products and add items to your cart"
indicator={<ShoppingCartIcon />}
title="Your cart is empty"
/>
)}
</For>
</VStack>
子要素を追加する
Your cart is empty
Explore our products and add items to your cart
<EmptyState.Root
description="Explore our products and add items to your cart"
indicator={<ShoppingCartIcon />}
title="Your cart is empty"
>
<Button>Back to home</Button>
</EmptyState.Root>
カスタマイズする
Your cart is empty
Explore our products and add items to your cart
<EmptyState.Root>
<EmptyState.Indicator>
<ShoppingCartIcon />
</EmptyState.Indicator>
<EmptyState.Title>Your cart is empty</EmptyState.Title>
<EmptyState.Description>
Explore our products and add items to your cart
</EmptyState.Description>
</EmptyState.Root>
Props
類似のコンポーネント
Skeleton
Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
Status
Statusは、プロセスまたは状態のステータスを示すコンポーネントです。
Snacks
Snacksは、フォームなどで使用される通知を制御するコンポーネントです。
Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
CircleProgress
CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。
Alert
Alertは、ユーザーに情報を伝達するコンポーネントです。
Tip
Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。