CNWei
cc35400f67
- TextButton：文字按钮（tone 主色/危险、可选图标、disabled）， 用于表格行内操作，hover 只加下划线 - ToggleRow：左标签 + 右开关的开关行，支持 hint 与 switchLabel - Table：新增 size='md' | 'sm'，sm 把行内边距收到 space-2 - 展示页：按钮补「文字按钮」、开关补「开关行」、表格补「紧凑档」； COMPONENTS.md 契约 3.46 / 3.47 与 README 清单同步
102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
import { useState } from 'react'
|
||
import { Space, Switch, Text, ToggleRow } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Switches() {
|
||
const [autoSync, setAutoSync] = useState(true)
|
||
const [showCover, setShowCover] = useState(false)
|
||
const [compact] = useState(true)
|
||
|
||
return (
|
||
<Section
|
||
id="switch"
|
||
title="开关"
|
||
api="Switch"
|
||
desc="设置项的即时开关：改了立刻生效，不需要「保存」。需要用户确认的场景用 Checkbox + 提交按钮，不要用开关。"
|
||
>
|
||
<Demo
|
||
title="基础用法"
|
||
desc="受控组件：checked + onChange。旁边有文字说明时，文字用 Text，开关的 label 仍要传（供读屏）。"
|
||
layout="column"
|
||
code={`<Space justify="between" style={{ width: 280 }}>
|
||
<Text>自动同步</Text>
|
||
<Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
|
||
</Space>`}
|
||
>
|
||
<Space justify="between" style={{ width: 300 }}>
|
||
<Text>自动同步</Text>
|
||
<Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
|
||
</Space>
|
||
<Space justify="between" style={{ width: 300 }}>
|
||
<Text>显示封面图</Text>
|
||
<Switch checked={showCover} onChange={setShowCover} label="显示封面图" />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="尺寸"
|
||
desc="sm 用于行内紧凑列表，md 用于设置表单。"
|
||
code={`<Switch size="sm" checked={on} onChange={setOn} label="紧凑模式" />
|
||
<Switch size="md" checked={on} onChange={setOn} label="紧凑模式" />`}
|
||
>
|
||
<Space gap="lg">
|
||
<Switch size="sm" checked={compact} onChange={() => undefined} label="紧凑模式" />
|
||
<Switch size="md" checked={compact} onChange={() => undefined} label="紧凑模式" />
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="禁用"
|
||
desc="禁用时保留当前状态的可读性，只降透明度并改光标。"
|
||
code={`<Switch checked onChange={() => {}} disabled label="不可修改" />`}
|
||
>
|
||
<Space gap="lg">
|
||
<Switch checked onChange={() => undefined} disabled label="不可修改（开）" />
|
||
<Switch checked={false} onChange={() => undefined} disabled label="不可修改（关）" />
|
||
</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: '受控状态' },
|
||
{ name: 'onChange', type: '(checked: boolean) => void', required: true, desc: '切换回调' },
|
||
{ name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '32×18 / 40×22' },
|
||
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
|
||
{ 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>
|
||
)
|
||
}
|