NoSelection 未选择

详情面板等待用户选择时的空状态

已验证自 0.3.4

用法

基础

示例加载中...

最佳实践

面板有效但依赖用户选择时使用；数据集为空用 TxNoData，筛选无结果用 TxSearchEmpty。
配合列表或表格中可见的选中提示，让用户知道去哪里选。
分栏详情区用 surface="card"，让空区域有清晰边界。
操作文案要具体，例如「新建项目」「打开列表」，不写「确定」。

API 参考

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

属性

属性名	类型	默认值	说明
`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`	-	替换生成的主/次操作按钮。

技术实现

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

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