64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { Select, Space, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const OPTIONS = [
|
|
{ value: 'new', label: '最近更新' },
|
|
{ value: 'hot', label: '最热门' },
|
|
{ value: 'name', label: '按名称' },
|
|
{ value: 'none', label: '（暂不可用）', disabled: true },
|
|
]
|
|
|
|
export function Selects() {
|
|
const [sort, setSort] = useState('new')
|
|
const [kind, setKind] = useState<string | undefined>(undefined)
|
|
|
|
return (
|
|
<Section
|
|
id="select"
|
|
title="下拉选择"
|
|
api="Select"
|
|
desc="受控的单值选择：触发器是原生 button，展开后是 listbox；支持点击外部关闭、Esc、↑↓ 移动、Enter 选择。"
|
|
>
|
|
<Demo
|
|
title="基础用法"
|
|
desc="不传 value 时显示 placeholder；禁用的选项不可点、不可选。"
|
|
code={`const [sort, setSort] = useState('new')
|
|
|
|
<Select options={OPTIONS} value={sort} onChange={setSort} />`}
|
|
>
|
|
<Space gap="md" wrap>
|
|
<Select options={OPTIONS} value={sort} onChange={setSort} />
|
|
<Text size="sm" tone="muted">
|
|
当前：{OPTIONS.find((option) => option.value === sort)?.label}
|
|
</Text>
|
|
</Space>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="占位与禁用"
|
|
desc="placeholder 只在没有选中值时出现；整个控件 disabled 时不可展开。"
|
|
code={`<Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
|
|
<Select options={OPTIONS} value={kind} onChange={setKind} disabled />`}
|
|
>
|
|
<Space gap="md" wrap>
|
|
<Select options={OPTIONS} value={kind} onChange={setKind} placeholder="选择类型" />
|
|
<Select options={OPTIONS} value={kind} onChange={setKind} disabled />
|
|
</Space>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'options', type: 'SelectOption[]', required: true, desc: '{ value, label, disabled? }' },
|
|
{ name: 'value', type: 'string', desc: '当前值' },
|
|
{ name: 'onChange', type: '(value: string) => void', required: true, desc: '选择回调' },
|
|
{ name: 'placeholder', type: 'string', defaultValue: "'请选择'", desc: '未选中时的文案' },
|
|
{ name: 'disabled', type: 'boolean', defaultValue: 'false', desc: '禁用整个控件' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|