90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import { useState } from 'react'
|
||
import { Button, Checkbox, Drawer, Space, Switch, Text } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Drawers() {
|
||
const [rightOpen, setRightOpen] = useState(false)
|
||
const [leftOpen, setLeftOpen] = useState(false)
|
||
const [autoSync, setAutoSync] = useState(true)
|
||
const [notify, setNotify] = useState(false)
|
||
|
||
return (
|
||
<Section
|
||
id="drawer"
|
||
title="抽屉"
|
||
api="Drawer"
|
||
desc="从侧边滑出的面板：筛选、设置、详情。基于原生 <dialog>（焦点陷阱、Esc、背景 inert），贴边全高，不打断主流程。"
|
||
>
|
||
<Demo
|
||
title="右侧设置"
|
||
desc="标题栏带关闭按钮；底部操作区可选。点遮罩或按 Esc 也会关闭。"
|
||
code={`const [open, setOpen] = useState(false)
|
||
|
||
<Button onClick={() => setOpen(true)}>打开设置</Button>
|
||
<Drawer open={open} onClose={() => setOpen(false)} title="偏好设置"
|
||
footer={<><Button variant="ghost" onClick={() => setOpen(false)}>取消</Button>
|
||
<Button onClick={() => setOpen(false)}>保存</Button></>}>
|
||
…
|
||
</Drawer>`}
|
||
>
|
||
<Space gap="md" wrap>
|
||
<Button onClick={() => setRightOpen(true)}>打开设置</Button>
|
||
<Button variant="secondary" onClick={() => setLeftOpen(true)}>
|
||
左侧抽屉
|
||
</Button>
|
||
</Space>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'open', type: 'boolean', required: true, desc: '受控开关' },
|
||
{ name: 'onClose', type: '() => void', required: true, desc: 'Esc / 遮罩 / 关闭按钮都会调用' },
|
||
{ name: 'title', type: 'ReactNode', desc: '标题' },
|
||
{ name: 'placement', type: "'right' | 'left'", defaultValue: "'right'", desc: '贴哪一边' },
|
||
{ name: 'width', type: 'number', defaultValue: '360', desc: '宽度（px）' },
|
||
{ name: 'footer', type: 'ReactNode', desc: '底部操作区' },
|
||
]}
|
||
/>
|
||
|
||
<Drawer
|
||
open={rightOpen}
|
||
onClose={() => setRightOpen(false)}
|
||
title="偏好设置"
|
||
footer={
|
||
<>
|
||
<Button variant="ghost" onClick={() => setRightOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={() => setRightOpen(false)}>保存</Button>
|
||
</>
|
||
}
|
||
>
|
||
<Space direction="column" gap="lg" align="stretch">
|
||
<Space justify="between">
|
||
<Text>自动同步</Text>
|
||
<Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
|
||
</Space>
|
||
<Checkbox checked={notify} onChange={setNotify} label="每周摘要提醒" />
|
||
<Text size="sm" tone="muted">
|
||
抽屉内容通常是表单或筛选器；需要打断流程的确认请用 Modal。
|
||
</Text>
|
||
</Space>
|
||
</Drawer>
|
||
|
||
<Drawer
|
||
open={leftOpen}
|
||
onClose={() => setLeftOpen(false)}
|
||
placement="left"
|
||
width={300}
|
||
title="导航"
|
||
>
|
||
<Text size="sm" tone="muted">
|
||
左侧抽屉常用于移动端导航；桌面端优先用常驻侧栏。
|
||
</Text>
|
||
</Drawer>
|
||
</Section>
|
||
)
|
||
}
|