125k

Empty

PreviousNext

空の状態を表示するには、Empty コンポーネントを使用します。

BaseRadixReact Aria
プロジェクトはまだありません
まだプロジェクトを作成していません。最初のプロジェクトを作成して始めましょう。
詳細を見る 
import { IconFolderCode } from "@tabler/icons-react"
import { ArrowUpRightIcon } from "lucide-react"

インストール

pnpm dlx shadcn@latest add empty

使い方

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

構成

Empty 状態を構築するには、次の構成を使用します。

Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent

アウトライン

border ユーティリティ クラスを使用して、アウトラインの空の状態を作成します。

クラウドストレージが空です
ファイルをクラウドストレージにアップロードすると、どこからでもアクセスできます。
import { IconCloud } from "@tabler/icons-react"

import { Button } from "@/components/ui/aria/button"

背景

bg-* および bg-gradient-* ユーティリティを使用して、空の状態に背景を追加します。

通知はありません
すべて確認済みです。新しい通知はここに表示されます。
import { IconBell } from "@tabler/icons-react"
import { RefreshCcwIcon } from "lucide-react"

アバター

EmptyMedia コンポーネントを使用して、空の状態のアバターを表示します。

LR
ユーザーはオフラインです
このユーザーは現在オフラインです。メッセージを残して通知するか、後でもう一度お試しください。
import {
  Avatar,
  AvatarFallback,

アバター グループ

EmptyMedia コンポーネントを使用して、アバター グループを空の状態で表示します。

@shadcn
CN
@maxleiter
LR
@evilrabbit
ER
チームメンバーがいません
このプロジェクトで共同作業するためにチームを招待しましょう。
import { PlusIcon } from "lucide-react"

import {

InputGroup

InputGroup コンポーネントを EmptyContent コンポーネントに追加できます。

404 - ページが見つかりません
お探しのページは存在しません。以下から必要な情報を検索してみてください。
/
お困りですか？ サポートに問い合わせる
import { SearchIcon } from "lucide-react"

import {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

لا توجد مشاريع بعد
لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.
تعرف على المزيد 
"use client"

import * as React from "react"

API リファレンス

Empty

空の状態の主要コンポーネント。EmptyHeader コンポーネントと EmptyContent コンポーネントをラップします。

PropTypeDefault
classNamestring
<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

EmptyHeader コンポーネントは、空のメディア、タイトル、および説明をラップします。

PropTypeDefault
classNamestring
<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

アイコンや画像などの空の状態のメディアを表示するには、EmptyMedia コンポーネントを使用します。これを使用して、アバターなどの他のコンポーネントを表示することもできます。

PropTypeDefault
variant"default" | "icon"default
classNamestring
<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>
<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

EmptyTitle コンポーネントを使用して、空の状態のタイトルを表示します。

PropTypeDefault
classNamestring
<EmptyTitle>No data</EmptyTitle>

EmptyDescription

EmptyDescription コンポーネントを使用して、空の状態の説明を表示します。

PropTypeDefault
classNamestring
<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

EmptyContent コンポーネントを使用して、ボタン、入力、リンクなどの空の状態のコンテンツを表示します。

PropTypeDefault
classNamestring
<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>