94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { useState } from 'react'
|
||
import { Card, Icon, Menu, Text } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
const ITEMS = [
|
||
{
|
||
key: 'content',
|
||
label: '内容',
|
||
icon: <Icon name="folder_more_line" />,
|
||
children: [
|
||
{ key: 'recommend', label: '常用推荐' },
|
||
{ key: 'movie', label: '推荐电影' },
|
||
{ key: 'ces', label: 'CES 现场报道' },
|
||
],
|
||
},
|
||
{
|
||
key: 'system',
|
||
label: '系统',
|
||
icon: <Icon name="settings_1_line" />,
|
||
children: [
|
||
{ key: 'profile', label: '资料' },
|
||
{ key: 'data', label: '内容库' },
|
||
],
|
||
},
|
||
{ key: 'about', label: '关于', icon: <Icon name="question_line" /> },
|
||
]
|
||
|
||
export function MenuSection() {
|
||
const [active, setActive] = useState('recommend')
|
||
|
||
return (
|
||
<Section
|
||
id="menu"
|
||
title="菜单"
|
||
api="Menu"
|
||
desc="侧栏菜单：一层折叠 + 两级结构，数据无关——业务树由页面转成 items。含 activeKey 的父级会自动展开。"
|
||
>
|
||
<Demo
|
||
title="基础用法"
|
||
desc="父级是折叠按钮（aria-expanded），子项是导航项（aria-current=page）。"
|
||
code={`const [active, setActive] = useState('recommend')
|
||
|
||
<Menu items={ITEMS} activeKey={active} onSelect={setActive} />`}
|
||
>
|
||
<Card padding="sm" style={{ width: 240 }}>
|
||
<Menu items={ITEMS} activeKey={active} onSelect={setActive} />
|
||
</Card>
|
||
<Text size="sm" tone="muted">
|
||
当前：{active}
|
||
</Text>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="默认展开"
|
||
desc="defaultOpenKeys 指定初始展开的父级；用户手动折叠后以用户操作为准。"
|
||
code={`<Menu items={ITEMS} activeKey="data" onSelect={() => {}} defaultOpenKeys={['system']} />`}
|
||
>
|
||
<Card padding="sm" style={{ width: 240 }}>
|
||
<Menu items={ITEMS} activeKey="data" onSelect={() => undefined} defaultOpenKeys={['system']} />
|
||
</Card>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="行高"
|
||
desc="默认 36px；需要更松的密度（如资料较多、点击目标更大）时传 itemHeight。"
|
||
layout="column"
|
||
code={`<Menu items={ITEMS} activeKey="data" onSelect={() => {}} itemHeight={44} />`}
|
||
>
|
||
<Card padding="sm" style={{ width: 240 }}>
|
||
<Menu
|
||
items={ITEMS}
|
||
activeKey="data"
|
||
onSelect={() => undefined}
|
||
defaultOpenKeys={['system']}
|
||
itemHeight={44}
|
||
/>
|
||
</Card>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'items', type: 'MenuItem[]', required: true, desc: '{ key, label, icon?, children? }' },
|
||
{ name: 'activeKey', type: 'string', desc: '当前选中项' },
|
||
{ name: 'onSelect', type: '(key: string) => void', required: true, desc: '选中回调' },
|
||
{ name: 'defaultOpenKeys', type: 'string[]', desc: '初始展开的父级 key' },
|
||
{ name: 'itemHeight', type: 'number', defaultValue: '36', desc: '一级菜单行高（px）' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|