feat(ui): 新增 TextButton / ToggleRow,Table 支持紧凑档
- TextButton:文字按钮(tone 主色/危险、可选图标、disabled), 用于表格行内操作,hover 只加下划线 - ToggleRow:左标签 + 右开关的开关行,支持 hint 与 switchLabel - Table:新增 size='md' | 'sm',sm 把行内边距收到 space-2 - 展示页:按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」; COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
This commit is contained in:
@@ -56,6 +56,15 @@ export function Tables() {
|
||||
<Table columns={COLUMNS} rows={ROWS} rowKey="id" />
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="紧凑档"
|
||||
desc="size='sm' 把行高收一档,配置面板那种列多、面板窄的场景用它。"
|
||||
layout="column"
|
||||
code={`<Table columns={COLUMNS} rows={ROWS} size="sm" />`}
|
||||
>
|
||||
<Table columns={COLUMNS} rows={ROWS} size="sm" />
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="空态"
|
||||
desc="空数据时渲染默认文案;也可以传 emptyText 换一句更具体的说明。"
|
||||
@@ -70,6 +79,7 @@ export function Tables() {
|
||||
{ name: 'columns', type: 'TableColumn[]', required: true, desc: '{ key, title, width?, align? }' },
|
||||
{ name: 'rows', type: 'Record<string, ReactNode>[]', required: true, desc: '行数据,键对应列的 key' },
|
||||
{ name: 'rowKey', type: 'string', defaultValue: "'id'", desc: '行的唯一键字段' },
|
||||
{ name: 'size', type: "'md' | 'sm'", defaultValue: "'md'", desc: '行高密度' },
|
||||
{ name: 'emptyText', type: 'ReactNode', defaultValue: "'暂无数据'", desc: '空态文案' },
|
||||
]}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user