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
類似のコンポーネント
Alert
Alertは、ユーザーに情報を伝達するコンポーネントです。
CircleProgress
CircleProgressは、進行状況を円形のプログレスバーで表示するコンポーネントです。
Progress
Progressは、進行状況を視覚的に示すためのコンポーネントです。
Skeleton
Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
Snacks
Snacksは、フォームなどで使用される通知を制御するコンポーネントです。
Status
Statusは、プロセスまたは状態のステータスを示すコンポーネントです。
Tip
Tipは、アイコンボタンをトリガーとして補足情報を表示するコンポーネントです。