89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import { useState } from 'react'
|
|
import { Checkbox, Space, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
export function Checkboxes() {
|
|
const [remember, setRemember] = useState(true)
|
|
const [notify, setNotify] = useState(false)
|
|
const [selected, setSelected] = useState<string[]>(['design'])
|
|
|
|
const toggle = (value: string) =>
|
|
setSelected((current) =>
|
|
current.includes(value) ? current.filter((item) => item !== value) : [...current, value],
|
|
)
|
|
|
|
return (
|
|
<Section
|
|
id="checkbox"
|
|
title="复选框"
|
|
api="Checkbox"
|
|
desc="多选与「记住我 / 订阅」这类需要确认的选项。用原生 input[type=checkbox]，键盘、读屏、点击文字都可勾选。"
|
|
>
|
|
<Demo
|
|
title="基础用法"
|
|
desc="label 同时作为可见文字和无障碍名称；受控写法与 Switch 一致。"
|
|
layout="column"
|
|
code={`<Checkbox checked={remember} onChange={setRemember} label="记住登录状态" />
|
|
<Checkbox checked={notify} onChange={setNotify} label="有新内容时提醒我" />`}
|
|
>
|
|
<Checkbox checked={remember} onChange={setRemember} label="记住登录状态" />
|
|
<Checkbox checked={notify} onChange={setNotify} label="有新内容时提醒我" />
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="多选组"
|
|
desc="一列用 Space 排列；组本身不需要额外容器，用方向 + 间距控制即可。"
|
|
layout="column"
|
|
code={`{options.map((item) => (
|
|
<Checkbox
|
|
key={item.value}
|
|
checked={selected.includes(item.value)}
|
|
onChange={() => toggle(item.value)}
|
|
label={item.label}
|
|
/>
|
|
))}`}
|
|
>
|
|
<Space direction="column" gap="sm" align="start">
|
|
{[
|
|
{ value: 'design', label: '设计资源' },
|
|
{ value: 'dev', label: '开发工具' },
|
|
{ value: 'movie', label: '电影片单' },
|
|
].map((item) => (
|
|
<Checkbox
|
|
key={item.value}
|
|
checked={selected.includes(item.value)}
|
|
onChange={() => toggle(item.value)}
|
|
label={item.label}
|
|
/>
|
|
))}
|
|
</Space>
|
|
<Text size="sm" tone="muted">
|
|
已选 {selected.length} 项
|
|
</Text>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="禁用"
|
|
desc="禁用态下点击文字也不会改变值；只降对比度，不隐藏。"
|
|
code={`<Checkbox checked onChange={() => {}} disabled label="不可修改（已选）" />`}
|
|
>
|
|
<Space gap="lg" wrap>
|
|
<Checkbox checked onChange={() => undefined} disabled label="不可修改（已选）" />
|
|
<Checkbox 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: 'label', type: 'ReactNode', required: true, desc: '可见文字，同时作为无障碍名称' },
|
|
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|