NoData 无数据

数据源返回零条记录时的空状态

已验证自 0.3.4

用法

基础

示例加载中...

最佳实践

数据源加载成功但没有记录时使用；断网、无权限、加载中与搜索无结果各有专用组件。
文案指向具体数据：「暂无发票」比「没有内容」清楚。
当前用户确实能创建或导入数据时，才提供操作。
仪表盘与表格面板内用 surface="card"，与加载后的容器一致。

API 参考

继承 TxEmptyState 除 variant 外的全部属性、事件与插槽；variant 固定为 no-data。

属性

属性名	类型	默认值	说明
`title`	`string`	预设标题	覆盖预设标题。
`description`	`string`	预设描述	说明为何为空或如何添加数据。
`icon`	`TxIconSource \| string \| null`	预设插画	替换插画；`null` 隐藏图标区。
`iconSize`	`number`	尺寸预设	图标尺寸（px）。
`layout`	`'vertical' \| 'horizontal'`	`'vertical'`	布局方向。
`align`	`'start' \| 'center' \| 'end'`	`'center'`	内容对齐。
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	间距与插画尺寸。
`surface`	`'plain' \| 'card'`	`'plain'`	`card` 添加卡片边框。
`primaryAction`	`EmptyStateAction`	-	生成主操作。
`secondaryAction`	`EmptyStateAction`	-	生成次操作。
`actionSize`	`TxButtonProps['size']`	`'sm'`	生成按钮的默认尺寸。
`loading`	`boolean`	`false`	无自定义图标时显示 spinner。

事件

事件名	参数	说明
`primary`	-	点击生成的主操作时触发。
`secondary`	-	点击生成的次操作时触发。

插槽

插槽名	Props	说明
`icon`	-	替换插画或图标。
`title`	-	替换标题。
`description`	-	替换描述。
`actions`	-	替换生成的主/次操作按钮。

类型

EmptyStateAction

字段	类型	默认值	说明
`label`	`string`	必填	按钮文案。
`type`	`TxButtonProps['type']`	-	按钮语义类型，例如 `primary`。
`variant`	`TxButtonProps['variant']`	-	按钮视觉变体。
`size`	`TxButtonProps['size']`	`actionSize`	单个按钮的尺寸。
`disabled`	`boolean`	`false`	禁用按钮。
`icon`	`string`	-	按钮图标 class。

技术实现

源码：packages/tuffex/packages/components/src/no-data/。

packages/tuffex/packages/components/src/no-data/index.ts