Empty 空状态
空数据时的占位展示，支持标题、富内容描述、图标型媒体、两套内置插画、尺寸档位、横向布局与容器变体。
基础用法
基础用法
标题 + 描述
通过 title 属性（渲染进可见标题区，读取后即从宿主移除，不残留原生悬浮提示；清空传空串）与 description 属性组合展示。
标题 + 描述
标题层支持富内容：slot="title" 有内容时覆盖属性文案（可组合徽标、链接等任意内容）。
标题富内容（slot=title）
描述
描述文案支持 description 属性，也支持把富内容放进默认插槽（有内容时覆盖属性文案），适合展示换行说明或操作指引。
描述属性
描述富内容（默认插槽）
尺寸档位
size 提供 small / medium / large 三档（默认 medium），联动插画尺寸与文字档位；image-size 保留为数值精调，优先级高于档位联动。
尺寸档位
自定义插画（图片 URL / SVG 标记 / Slot）
illustration 属性支持图片 URL 与内联 SVG/HTML 标记；slot="illustration" 可传入任意内容，优先级最高。
图片 URL
SVG 标记
Slot 自定义插画
第二套简约插画
illustration="simple" 切换内置简约插画（原创轻量构图）。
简约插画
图标型媒体
icon 属性传入图标名（@oas-ui/icons registry），进入圆形底色指示器形态，与插画形态互斥；图标颜色走 CSS 变量 --oas-empty-icon-color（默认文字次级色，宿主可覆盖）。
图标型媒体
图标型媒体（自定义颜色）
横向布局
align="start" 或 align="end" 切换横向布局（图左文右 / 图右文左），适合宽容器或表单列内场景；默认 center 纵向居中。RTL 下自动镜像。
横向布局
容器变体
variant 提供 outlined（描边容器）与 filled（底色容器），无该属性时为空态默认的裸布局。
容器变体
隐藏插画
hide-image 隐藏插画区域，仅保留文字与操作区。
隐藏插画
操作区
默认插槽后的 slot="action" 放置操作按钮。
操作区
内容组合（头像 / 头像组 / 搜索输入）
空态不内建各业务内容的变体属性，靠插槽组合：oas-avatar / oas-avatar-group 放 illustration 插槽（媒体区，替换内置插画），oas-input 等交互元素放默认插槽（描述富内容，有内容时覆盖 description 属性）或 action 插槽。
头像（slot=illustration）
头像组（slot=illustration）
搜索无结果（默认插槽组合 oas-input）
API
oas-empty
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
align | 布局对齐：center（默认，纵向居中）/ start / end（横向图左文右 / 图右文左） | string | center |
description | 描述文案 | — | — |
hide-image | 隐藏插画 | — | — |
icon | 图标名（复用 oas-icon 图标集）：图标型媒体（图标 + 圆形浅底指示器），与插画形态互斥 | — | — |
illustration | 自定义插画：SVG/HTML 标记或图片 URL | — | — |
image-size | 插画尺寸（px） | — | — |
size | 尺寸档位 small / medium（默认）/ large：联动媒体尺寸与字号，与 image-size 正交 | string | medium |
title | 标题（显示于描述上方；渲染进可见标题区后从宿主移除——原生 title 吸收约定；富内容用 title 插槽） | string | — |
variant | 容器变体：outlined（描边）/ filled（底色），缺省无容器 | string | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 描述富内容插槽，有内容时覆盖 description 属性与内置文案 |
action | 操作区，置于描述下方 |
illustration | 自定义插画内容，优先级高于 illustration 属性 |
title | 标题富内容插槽，有内容时覆盖 title 属性文案 |
CSS 变量
| CSS 变量 | 默认值 |
|---|---|
--oas-empty-desc-size | var(--oas-font-size-md) |
--oas-empty-icon-color | var(--oas-color-text-secondary) |
--oas-empty-title-size | var(--oas-font-size-lg) |