还没有书评
读完一本书之后，来写第一篇。
<script setup lang="ts">
import { Button, Empty } from '@hina-ui/vue'
</script>
<template>
<Empty title="还没有书评" description="读完一本书之后，来写第一篇。" class="w-96">
<template #actions>
<Button size="sm">写书评</Button>
</template>
</Empty>
</template>
vue
用法
import { Empty } from '@hina-ui/vue'
ts
title 用一句话说明这里为什么是空的，description 补充下一步能做什么。图标、文字与操作从上到下居中排列，组件占满所在容器的宽度。
书架是空的
收藏的书会出现在这里。
<script setup lang="ts">
import { Empty } from '@hina-ui/vue'
</script>
<template>
<Empty title="书架是空的" description="收藏的书会出现在这里。" class="w-96" />
</template>
vue
示例
操作
actions 插槽放置让用户脱离空状态的操作，通常是一个主要按钮，或者再加一个次要按钮。
还没有书单
把想一起读的书收进一份书单。
<script setup lang="ts">
import { Button, Empty } from '@hina-ui/vue'
</script>
<template>
<Empty title="还没有书单" description="把想一起读的书收进一份书单。" class="w-96">
<template #actions>
<Button size="sm">新建书单</Button>
<Button size="sm" variant="ghost" tone="neutral">了解书单</Button>
</template>
</Empty>
</template>
vue
图标
默认图标是一个收件箱。icon 插槽换成更贴合场景的图标，例如搜索无结果时用带叉的放大镜；设为 false 时不显示图标。
没有匹配的结果
换个关键词试试。
没有匹配的结果
换个关键词试试。
<script setup lang="ts">
import { SearchX } from '@lucide/vue'
import { Empty, Inline } from '@hina-ui/vue'
</script>
<template>
<Inline gap="lg" align="start">
<Empty title="没有匹配的结果" description="换个关键词试试。" class="w-72">
<template #icon><SearchX class="text-muted size-8" /></template>
</Empty>
<Empty title="没有匹配的结果" description="换个关键词试试。" :icon="false" class="w-72" />
</Inline>
</template>
vue
插图
icon 插槽也可以放图片。放入插槽的内容不再套圆形底色，尺寸由内容自己决定。
收件箱空空如也
新的通知会第一时间送到这里。
<script setup lang="ts">
import { Button, Empty, Image } from '@hina-ui/vue'
</script>
<template>
<Empty title="收件箱空空如也" description="新的通知会第一时间送到这里。" class="w-96">
<template #icon>
<Image src="/avatars/peek.webp" :ratio="1" class="size-24 rounded-full" />
</template>
<template #actions>
<Button size="sm" variant="soft" tone="neutral">通知设置</Button>
</template>
</Empty>
</template>
vue
尺寸
三档尺寸同时改变图标、文字与内边距：sm 用于卡片内的小区域，md 是默认值，lg 用于整页的空状态。
没有评论
来说点什么。
没有评论
来说点什么。
没有评论
来说点什么。
<script setup lang="ts">
import { Empty, Stack } from '@hina-ui/vue'
</script>
<template>
<Stack gap="lg" class="w-96">
<Empty size="sm" title="没有评论" description="来说点什么。" />
<Empty title="没有评论" description="来说点什么。" />
<Empty size="lg" title="没有评论" description="来说点什么。" />
</Stack>
</template>
vue
放在面板里
作为列表或表格的空态时，直接放进 Panel 或 Card 的正文即可。
最近活动
0过去七天没有动态
关注一些人，这里就会热闹起来。
<script setup lang="ts">
import { Button, Empty, Panel } from '@hina-ui/vue'
</script>
<template>
<Panel title="最近活动" :count="0" class="w-96">
<template #actions>
<Button size="sm" variant="ghost" tone="neutral">全部</Button>
</template>
<Empty size="sm" title="过去七天没有动态" description="关注一些人，这里就会热闹起来。" />
</Panel>
</template>
vue
无障碍
- 图标与插图只是装饰，对辅助技术隐藏；标题与说明以普通文字呈现。
- 操作区的按钮沿用各自的无障碍名，不需要额外标注。
API
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | — | 标题 |
description | string | — | 标题下方的说明 |
icon | boolean | true | 是否显示默认图标 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸 |
class | string | — | 追加至根元素的类名 |
插槽
| 插槽 | 说明 |
|---|---|
| default | 文字下方的额外内容 |
icon | 替换默认图标的图标或插图 |
actions | 最下方的操作 |