58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { Icon, Segmented, Text } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const OPTIONS = [
|
|
{ value: 'grid', label: '网格', icon: <Icon name="grid_line" /> },
|
|
{ value: 'list', label: '列表', icon: <Icon name="menu_line" /> },
|
|
]
|
|
|
|
export function Segmenteds() {
|
|
const [view, setView] = useState('grid')
|
|
|
|
return (
|
|
<Section
|
|
id="segmented"
|
|
title="分段"
|
|
api="Segmented"
|
|
desc="在几个视图之间切换（网格/列表、全部/收藏）。只切展示形态，不切内容分区——后者用 Tabs。"
|
|
>
|
|
<Demo
|
|
title="基础用法"
|
|
desc="选中项白底 + 轻阴影，容器浅灰底；选项可以带图标。"
|
|
code={`const [view, setView] = useState('grid')
|
|
|
|
<Segmented options={OPTIONS} value={view} onChange={setView} />`}
|
|
>
|
|
<Segmented options={OPTIONS} value={view} onChange={setView} />
|
|
<Text size="sm" tone="muted">
|
|
当前：{view}
|
|
</Text>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="尺寸与占满整行"
|
|
desc="sm 用于卡片内；block 让选项等分宽度（窄容器或移动端常用）。"
|
|
layout="column"
|
|
code={`<Segmented size="sm" options={OPTIONS} value={view} onChange={setView} />
|
|
<Segmented block options={OPTIONS} value={view} onChange={setView} />`}
|
|
>
|
|
<Segmented size="sm" options={OPTIONS} value={view} onChange={setView} />
|
|
<Segmented block options={OPTIONS} value={view} onChange={setView} />
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'options', type: 'SegmentedOption[]', required: true, desc: '{ value, label, icon? }' },
|
|
{ name: 'value', type: 'string', required: true, desc: '当前值' },
|
|
{ name: 'onChange', type: '(value: string) => void', required: true, desc: '切换回调' },
|
|
{ name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '24 / 28px 高' },
|
|
{ name: 'block', type: 'boolean', defaultValue: 'false', desc: '占满一行，选项等分' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|