73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
||
import { Space, Switch, Text } 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>
|
||
|
||
<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: '无障碍名称：旁边没有文字时必填' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|