Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.6

EmptyState

EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。

ソース@yamada-ui/empty-state

インポート

import {
EmptyState,
EmptyStateIndicator,
EmptyStateTitle,
EmptyStateDescription,
} from "@yamada-ui/react"
Copied!
  • EmptyState: 子要素を表示するラッパーコンポーネントです。
  • 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>
Copied!

または、title, indicator, descriptionを使用しても子要素を省略することもできます。

編集可能な例

<EmptyState
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
/>
Copied!

サイズを変更する

編集可能な例

<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>
Copied!

子要素を追加する

編集可能な例

<EmptyState
  description="Explore our products and add items to your cart"
  indicator={<ShoppingCartIcon />}
  title="Your cart is empty"
>
  <Button>Back to home</Button>
</EmptyState>
Copied!

GitHubでこのページを編集する

ForPortal