59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { RadioGroup, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const OPTIONS = [
|
|
{ value: 'grid', label: '网格视图' },
|
|
{ value: 'list', label: '列表视图' },
|
|
{ value: 'compact', label: '紧凑视图（暂不可用）', disabled: true },
|
|
]
|
|
|
|
export function RadioGroups() {
|
|
const [view, setView] = useState('grid')
|
|
|
|
return (
|
|
<Section
|
|
id="radio"
|
|
title="单选"
|
|
api="RadioGroup"
|
|
desc="互斥选项组：原生 radio，键盘方向键在组内切换。单个「开/关」用 Switch，多选用 Checkbox。"
|
|
>
|
|
<Demo
|
|
title="基础用法"
|
|
desc="纵向排列适合设置项；横向排列适合 2–3 个短选项。"
|
|
layout="column"
|
|
code={`const [view, setView] = useState('grid')
|
|
|
|
<RadioGroup value={view} onChange={setView} options={OPTIONS} />
|
|
<RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />`}
|
|
>
|
|
<RadioGroup value={view} onChange={setView} options={OPTIONS} />
|
|
<RadioGroup value={view} onChange={setView} options={OPTIONS} direction="row" />
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="禁用"
|
|
desc="整组禁用时，所有选项都不可选；单个选项禁用只影响它自己。"
|
|
code={`<RadioGroup value="grid" onChange={() => {}} options={OPTIONS} disabled />`}
|
|
>
|
|
<RadioGroup value="grid" onChange={() => undefined} options={OPTIONS} disabled />
|
|
<Text size="sm" tone="muted">
|
|
整组禁用后仍能读出当前选中项
|
|
</Text>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'options', type: 'RadioOption[]', required: true, desc: '{ value, label, disabled? }' },
|
|
{ name: 'value', type: 'string', required: true, desc: '当前选中值' },
|
|
{ name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
|
|
{ name: 'direction', type: "'row' | 'column'", defaultValue: "'column'", desc: '排列方向' },
|
|
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整组' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|