SusEmptyState

列表或面板无内容时的占位符 — 图标、标题、CTA。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Icon	Prop<string>	"package"	v-model
Title	Prop<string>	""	v-model
Text	Prop<string>	""	v-model
ActionText	Prop<string>	""	v-model
Color	Prop<string>	"primary"	v-model
Size	Prop<string>	"md"	v-model
Justify	Prop<string>	"center"	v-model

插槽

名称
media
actions

事件

名称	字段	载荷
Action	OnAction	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-empty-state
• sus-empty-state__action
• sus-empty-state__actions
• sus-empty-state__icon
• sus-empty-state__media
• sus-empty-state__text
• sus-empty-state__title
• sus-empty-state--color-muted
• sus-empty-state--color-primary
• sus-empty-state--color-secondary
• sus-empty-state--has-action
• sus-empty-state--justify-center
• sus-empty-state--justify-end
• sus-empty-state--justify-start
• sus-empty-state--size-lg
• sus-empty-state--size-md
• sus-empty-state--size-sm
• sus-slot
• unity-label
• unity-text-element

用法

<template>
  <sus:SusEmptyState Icon="package"
                     Title="No loadouts yet"
                     Text="Create one to start matching."
                     ActionText="Create loadout"
                     Color="primary"
                     @action="OnCreate" />
</template>

<script>
void OnCreate() { /* … */ }
</script>

var empty = new SusEmptyState();
empty.Icon.Value = "inbox";
empty.Title.Value = "Nothing here";
empty.Text.Value = "Try another filter.";
empty.ActionText.Value = "Clear filters";
empty.OnAction += () => { /* … */ };

备注

• 当需要自定义内容时，插槽 media 和 actions 会替换默认的图标 / CTA。
• Size：sm · md · lg。