68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { Text, Tabs } from '../../src'
|
|
import { Demo } from '../components/Demo'
|
|
import { PropsTable } from '../components/PropsTable'
|
|
import { Section } from '../components/Section'
|
|
|
|
const ITEMS = [
|
|
{ key: 'detail', label: '详情' },
|
|
{ key: 'comments', label: '评论 6' },
|
|
{ key: 'history', label: '历史（暂不可用）', disabled: true },
|
|
]
|
|
|
|
export function TabsSection() {
|
|
const [tab, setTab] = useState('detail')
|
|
const [pillTab, setPillTab] = useState('all')
|
|
|
|
return (
|
|
<Section
|
|
id="tabs"
|
|
title="标签页"
|
|
api="Tabs"
|
|
desc="在几块内容之间切换。只负责标签栏，面板由页面渲染；键盘 ← → 移动、Home/End 跳首尾。"
|
|
>
|
|
<Demo
|
|
title="下划线（默认）"
|
|
desc="适合详情页、设置页这类页面级分区；选中项用 2px 主色下划线标记。"
|
|
layout="column"
|
|
code={`const [tab, setTab] = useState('detail')
|
|
|
|
<Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
|
|
<div role="tabpanel" style={{ paddingTop: 12 }}>{tab} 面板</div>`}
|
|
>
|
|
<Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
|
|
<Text size="sm" tone="muted">
|
|
当前面板：{tab}
|
|
</Text>
|
|
</Demo>
|
|
|
|
<Demo
|
|
title="胶囊"
|
|
desc="pill 变体放在浅底容器里，适合卡片内的次级切换。"
|
|
layout="column"
|
|
code={`<Tabs variant="pill" items={items} activeKey={pillTab} onChange={setPillTab} />`}
|
|
>
|
|
<Tabs
|
|
variant="pill"
|
|
items={[
|
|
{ key: 'all', label: '全部' },
|
|
{ key: 'published', label: '已发布' },
|
|
{ key: 'draft', label: '草稿' },
|
|
]}
|
|
activeKey={pillTab}
|
|
onChange={setPillTab}
|
|
/>
|
|
</Demo>
|
|
|
|
<PropsTable
|
|
rows={[
|
|
{ name: 'items', type: 'TabItem[]', required: true, desc: '{ key, label, disabled? }' },
|
|
{ name: 'activeKey', type: 'string', required: true, desc: '当前标签' },
|
|
{ name: 'onChange', type: '(key: string) => void', required: true, desc: '切换回调' },
|
|
{ name: 'variant', type: "'line' | 'pill'", defaultValue: "'line'", desc: '下划线 / 胶囊' },
|
|
]}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|