基础

Empty 空白状态

用于空白状态场景的 MoriUI 组件。

资源

导入

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from 'moriui'

组合方式

Empty 用 Header 组织 Media、Title、Description，并将主要操作放入 Content。

RTL

空状态继承外部 dir，说明和操作顺序适配 RTL 内容。

示例

概览

标准空状态与主要操作。

<script setup lang="ts">
  import { Inbox } from '@lucide/vue'
  import {
    Button,
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <Inbox class="size-5" />
      </EmptyMedia><EmptyTitle>还没有项目</EmptyTitle><EmptyDescription>创建第一个项目后，它会显示在这里。</EmptyDescription>
    </EmptyHeader><EmptyContent>
      <Button size="sm">
        新建项目
      </Button>
    </EmptyContent>
  </Empty>
</template>

描边

虚线边界强调可放置区域。

<script setup lang="ts">
  import { Inbox } from '@lucide/vue'
  import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md border border-dashed">
    <EmptyHeader>
      <EmptyMedia variant="icon">
        <Inbox class="size-5" />
      </EmptyMedia><EmptyTitle>没有文件</EmptyTitle><EmptyDescription>拖入文件或从设备选择。</EmptyDescription>
    </EmptyHeader>
  </Empty>
</template>

背景

弱化背景区分空状态范围。

<script setup lang="ts">
  import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md bg-muted/50">
    <EmptyHeader><EmptyTitle>没有匹配结果</EmptyTitle><EmptyDescription>尝试减少筛选条件。</EmptyDescription></EmptyHeader>
  </Empty>
</template>

头像

使用头像表达成员相关空状态。

<script setup lang="ts">
  import { User } from '@lucide/vue'
  import {
    Avatar,
    AvatarFallback,
    Button,
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md">
    <EmptyHeader><EmptyMedia><Avatar><AvatarFallback><User class="size-4" /></AvatarFallback></Avatar></EmptyMedia><EmptyTitle>还没有成员</EmptyTitle><EmptyDescription>邀请同事加入这个工作区。</EmptyDescription></EmptyHeader><EmptyContent>
      <Button size="sm">
        邀请成员
      </Button>
    </EmptyContent>
  </Empty>
</template>

头像组

以成员集合说明协作场景。

<script setup lang="ts">
  import {
    Avatar,
    AvatarFallback,
    AvatarGroup,
    AvatarGroupCount,
    Empty,
    EmptyHeader,
    EmptyMedia,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md">
    <EmptyHeader><EmptyMedia><AvatarGroup><Avatar><AvatarFallback>林</AvatarFallback></Avatar><Avatar><AvatarFallback>周</AvatarFallback></Avatar><AvatarGroupCount>+3</AvatarGroupCount></AvatarGroup></EmptyMedia><EmptyTitle>等待更多成员</EmptyTitle></EmptyHeader>
  </Empty>
</template>

输入组合

将下一步搜索操作放在内容区。

<script setup lang="ts">
  import { Search } from '@lucide/vue'
  import {
    Empty,
    EmptyContent,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
    InputGroup,
    InputGroupAddon,
    InputGroupInput
  } from 'moriui'
</script>

<template>
  <Empty class="w-full max-w-md">
    <EmptyHeader><EmptyTitle>搜索文档</EmptyTitle><EmptyDescription>输入关键词开始查找。</EmptyDescription></EmptyHeader><EmptyContent class="w-full">
      <InputGroup><InputGroupAddon><Search class="size-4" /></InputGroupAddon><InputGroupInput aria-label="搜索文档" placeholder="输入关键词" /></InputGroup>
    </EmptyContent>
  </Empty>
</template>

RTL

空状态支持从右到左内容。

<script setup lang="ts">
  import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle
  } from 'moriui'
</script>

<template>
  <Empty dir="rtl" class="w-full max-w-md">
    <EmptyHeader><EmptyTitle>لا توجد نتائج</EmptyTitle><EmptyDescription>جرّب تعديل كلمات البحث.</EmptyDescription></EmptyHeader>
  </Empty>
</template>

API

属性	类型	默认值	说明
Empty class	`HTMLAttributes["class"]`	`undefined`	合并到空状态根容器的调用方类。
EmptyHeader class	`HTMLAttributes["class"]`	`undefined`	合并到空状态页眉的调用方类。
EmptyMedia variant	`'default' \| 'icon'`	`'default'`	媒体区域是否使用图标表面。
EmptyTitle class	`HTMLAttributes["class"]`	`undefined`	合并到空状态标题的调用方类。
EmptyDescription class	`HTMLAttributes["class"]`	`undefined`	合并到空状态说明的调用方类。
EmptyContent class	`HTMLAttributes["class"]`	`undefined`	合并到空状态操作区的调用方类。

无障碍说明

EmptyTitle 应清楚描述当前状态，Description 说明原因或下一步；主要操作使用 Button。异步切换为空状态时，由外围按需提供 aria-live。

关联组件

操作按钮信息条目