空状态

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

将以下代码复制到你的项目中。

View complete source: components/ui/empty.tsx

根据项目配置更新导入路径。

用法

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>

Composition

Use the following composition to build an Empty state:

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

描边

Use the border utility class to create an outline empty state.

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

InputGroup

You can add an InputGroup component to the EmptyContent component.

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

API 参考

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

Prop	Type	Default
className	string

<Empty>
  <EmptyHeader />
  <EmptyContent />
</Empty>

EmptyHeader

The EmptyHeader component wraps the empty media, title, and description.

Prop	Type	Default
className	string

<EmptyHeader>
  <EmptyMedia />
  <EmptyTitle />
  <EmptyDescription />
</EmptyHeader>

EmptyMedia

Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

Prop	Type	Default
variant	"default" | "icon"	default
className	string

<EmptyMedia variant="icon">
  <Icon />
</EmptyMedia>

<EmptyMedia>
  <Avatar>
    <AvatarImage src="..." />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</EmptyMedia>

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

Prop	Type	Default
className	string

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

Use the EmptyDescription component to display the description of the empty state.

Prop	Type	Default
className	string

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

EmptyContent

Use the EmptyContent component to display the content of the empty state such as a button, input or a link.

Prop	Type	Default
className	string

<EmptyContent>
  <Button>Add Project</Button>
</EmptyContent>