跳到主要内容

空状态
就绪
Storybook

v11.0.0 版本起可用

空状态包含一条消息，并可选择包含图片、按钮和附加信息。

何时使用​

当没有数据可显示时，使用空状态通知用户，并提供下一步操作说明。示例用例：

  • 当用户尚未创建特定资源时
  • 当筛选或搜索查询没有返回结果时
  • 当用户完成所有操作时，例如清空收件箱或通知

有一个 EmptyState 组件，包含不同的变体，用于处理最常见的空状态用例。这些变体提供了合理的默认图片。

用法​

variant="call-to-action"​

当没有数据可显示，且希望鼓励用户采取行动时使用。通常是完成一些初始配置，或创建某个项目。

import { EmptyState, LinkButton, TextLink } from '@grafana/ui';

<EmptyState
  variant="call-to-action"
  message="You haven't created any playlists yet"
  button={
    <LinkButton icon="plus" href="playlists/new" size="lg">
      Create playlist
    </LinkButton>
  }
>
  You can use playlists to cycle dashboards on TVs without user control.{' '}
  <TextLink external href="<externalDocsLink>">
    Learn more.
  </TextLink>
</EmptyState>;

对于没有单一按钮可点击来创建项目的情况，可以省略 button prop。取而代之的是，提供附加信息以帮助用户了解如何创建特定资源。

import { EmptyState, TextLink } from '@grafana/ui';

<EmptyState variant="call-to-action" message="You haven't created any library panels yet">
  Create a library panel from any existing dashboard panel through the panel context menu.{' '}
  <TextLink external href="<externalDocsLink>">
    Learn more.
  </TextLink>
</EmptyState>;

variant="not-found"​

当搜索查询或筛选没有返回结果时，用于替换内容区域。

图片有合理的默认设置，因此在大多数情况下，您只需要提供一条消息。

import { EmptyState } from '@grafana/ui';

<EmptyState variant="not-found" message="No playlists found" />

variant="completed"​

当用户完成了页面上的所有任务时使用，例如已阅读所有通知。

import { EmptyState } from '@grafana/ui';

<EmptyState variant="completed" message="You're all caught up" />;

自定义​

对于所有变体，您可以

  • 提供自定义图片或完全隐藏图片
  • 提供一个按钮（例如，提供行动呼吁或清除搜索查询）
  • 通过 React children 提供附加信息
import { Button, EmptyState, TextLink } from '@grafana/ui';

<EmptyState
  button={<Button variant="secondary" onClick={clearSearchQuery} />}
  image={<AnyReactNode />}
  message="No playlists found"
  variant="not-found"
>
  Optionally provide some additional information here. Maybe even a link to{' '}
  <TextLink href="<externalDocsLink>" external>
    documentation.
  </TextLink>
</EmptyState>

演练场​