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:
@@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { Space, Switch, Text } from '../../src'
|
||||
import { Space, Switch, Text, ToggleRow } from '../../src'
|
||||
import { Demo } from '../components/Demo'
|
||||
import { PropsTable } from '../components/PropsTable'
|
||||
import { Section } from '../components/Section'
|
||||
@@ -58,6 +58,24 @@ export function Switches() {
|
||||
</Space>
|
||||
</Demo>
|
||||
|
||||
<Demo
|
||||
title="开关行"
|
||||
desc="设置面板里每行一个开关时用 ToggleRow:左边标签(可带一行说明),右边开关,两端对齐,不用自己拼 Space。"
|
||||
layout="column"
|
||||
code={`<ToggleRow label="明暗切换" checked={on} onChange={setOn} />
|
||||
<ToggleRow label="显示封面图" hint="列表里用封面代替首字" checked={showCover} onChange={setShowCover} />`}
|
||||
>
|
||||
<div style={{ width: 360 }}>
|
||||
<ToggleRow label="明暗切换" checked={autoSync} onChange={setAutoSync} />
|
||||
<ToggleRow
|
||||
label="显示封面图"
|
||||
hint="列表里用封面代替首字"
|
||||
checked={showCover}
|
||||
onChange={setShowCover}
|
||||
/>
|
||||
</div>
|
||||
</Demo>
|
||||
|
||||
<PropsTable
|
||||
rows={[
|
||||
{ name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
|
||||
@@ -67,6 +85,17 @@ export function Switches() {
|
||||
{ name: 'label', type: 'string', desc: '无障碍名称:旁边没有文字时必填' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<PropsTable
|
||||
rows={[
|
||||
{ name: 'label', type: 'ReactNode', required: true, desc: '左侧标签' },
|
||||
{ name: 'checked', type: 'boolean', required: true, desc: '受控状态' },
|
||||
{ name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '切换回调' },
|
||||
{ name: 'switchLabel', type: 'string', desc: '读屏用的开关名称,默认取 label' },
|
||||
{ name: 'hint', type: 'ReactNode', desc: '标签下方的一行说明' },
|
||||
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
|
||||
]}
|
||||
/>
|
||||
</Section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user