Empty 空状态

用 Empty 组件展示空状态。组件自身宽于 480vp 时，内边距从 24 增加到 48vp。

基础用法

SEmpty({ bordered: true }) {
  SEmptyHeader() {
    SEmptyMedia({ icon: 'folder', variant: 'icon' })
    SEmptyTitle({ text: 'No Projects Yet' })
    SEmptyDescription({ text: "You haven't created any projects yet. Get started by creating your first project." })
  }
  SEmptyContent() {
    Row({ space: 8 }) {
      SButton({ text: 'Create Project' })
      SButton({ text: 'Import Project', variant: 'outline' })
    }
    SButton({ text: 'Learn More', variant: 'link', sizing: 'sm', iconRight: 'arrow-up-right' })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

头像媒体

SEmpty() {
  SEmptyHeader() {
    SEmptyMedia() { SAvatar({ fallback: 'LR', sizing: 48 }) }
    SEmptyTitle({ text: 'User Offline' })
    SEmptyDescription({ text: 'This user is currently offline. You can leave a message.' })
  }
  SEmptyContent() { SButton({ text: 'Leave Message', variant: 'outline', sizing: 'sm' }) }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

填充与紧凑

filled：bg-muted/50 的底色；compact：适合小容器的 16vp 内边距。

SEmpty({ filled: true }) {
  SEmptyHeader() {
    SEmptyMedia({ icon: 'bell', variant: 'icon' })
    SEmptyTitle({ text: 'No Notifications' })
    SEmptyDescription({ text: "You're all caught up." })
  }
}
SEmpty({ compact: true, bordered: true }) {
  SEmptyHeader() {
    SEmptyTitle({ text: 'No results' })
    SEmptyDescription({ text: 'Try a different search.' })
  }
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SEmpty

shadcn-vue 的 Empty：flex flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 md:p-12 text-center。内边距随组件自身宽度变化（小于 480vp 时为 24vp，大于时为 48vp）；bordered 绘制虚线轮廓。

变体：bordered（虚线轮廓）、filled（bg-muted/50 表面）和 compact（16vp 内边距，16vp 间距——用于卡片、列表或弹出框中的空状态）。

属性	类型	默认值	说明
bordered	boolean	false
filled	boolean	false	弱化的表面（bg-muted/50）。
compact	boolean	false	用于小型容器的紧凑间距。
modifier	AttributeModifier<ColumnAttribute>	new SparkNoopModifier<ColumnAttribute>()

插槽: 子组件（尾随闭包）

SEmptyHeader

flex max-w-sm flex-col items-center gap-2 text-center。

插槽: 子组件（尾随闭包）

SEmptyMedia

mb-2 flex shrink-0 items-center justify-center；icon 变体为 bg-muted size-10 rounded-lg，内含 24vp 的图标。头像或图片请在默认变体的插槽中放置。

属性	类型	默认值	说明
icon	string | undefined	undefined
variant	EmptyMediaVariant EmptyMediaVariant = 'default' | 'icon'	'default'

插槽: 子组件（尾随闭包）

SEmptyTitle

text-lg font-medium tracking-tight。

属性	类型	默认值	说明
text	ResourceStr	''

SEmptyDescription

text-muted-foreground text-sm/relaxed。

属性	类型	默认值	说明
text	ResourceStr	''

SEmptyContent

flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm。

插槽: 子组件（尾随闭包）