93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import { Button, IconButton, Icon, Popover, Space, Text, Tooltip } from '../../src'
|
||
import { Demo } from '../components/Demo'
|
||
import { PropsTable } from '../components/PropsTable'
|
||
import { Section } from '../components/Section'
|
||
|
||
export function Tooltips() {
|
||
return (
|
||
<Section
|
||
id="tooltip"
|
||
title="工具提示"
|
||
api="Tooltip / Popover"
|
||
desc="Tooltip 是 hover / 聚焦时出现的一行文字；Popover 是点击展开的小面板。两者都只做轻量内容，复杂交互请用 Drawer / Modal。"
|
||
>
|
||
<Demo
|
||
title="文字提示"
|
||
desc="纯 CSS 定位（top / bottom），触发元素建议是可聚焦的按钮或链接；键盘聚焦时同样出现。"
|
||
code={`<Tooltip content="重新扫描项目">
|
||
<IconButton label="刷新" icon={<Icon name="refresh_3_line" />} />
|
||
</Tooltip>
|
||
|
||
<Tooltip content="出现在下方" placement="bottom">
|
||
<Button variant="secondary">下方提示</Button>
|
||
</Tooltip>`}
|
||
>
|
||
<Space gap="lg">
|
||
<Tooltip content="重新扫描项目">
|
||
<IconButton label="刷新" icon={<Icon name="refresh_3_line" />} variant="soft" />
|
||
</Tooltip>
|
||
<Tooltip content="出现在下方" placement="bottom">
|
||
<Button variant="secondary">下方提示</Button>
|
||
</Tooltip>
|
||
</Space>
|
||
</Demo>
|
||
|
||
<Demo
|
||
title="气泡卡片"
|
||
desc="点击触发器展开，点外部或 Esc 关闭；面板里可以放说明、链接或简单表单。"
|
||
code={`<Popover
|
||
content={<Text size="sm">改动会立即写入 data/stash.db，5 秒内推送前端。</Text>}
|
||
>
|
||
<Button variant="ghost">说明</Button>
|
||
</Popover>`}
|
||
>
|
||
<Space gap="lg">
|
||
<Popover
|
||
content={
|
||
<Text size="sm" tone="sub">
|
||
改动会立即写入 data/stash.db，服务端 5 秒内通过 SSE 推送前端。
|
||
</Text>
|
||
}
|
||
>
|
||
<Button variant="ghost">说明</Button>
|
||
</Popover>
|
||
<Popover
|
||
placement="bottom-end"
|
||
content={
|
||
<Space direction="column" gap="sm" align="start">
|
||
<Text size="sm" strong>
|
||
快捷操作
|
||
</Text>
|
||
<Button size="sm" variant="ghost">
|
||
重新扫描
|
||
</Button>
|
||
<Button size="sm" variant="ghost">
|
||
打开内容库
|
||
</Button>
|
||
</Space>
|
||
}
|
||
>
|
||
<Button variant="secondary">更多操作</Button>
|
||
</Popover>
|
||
</Space>
|
||
</Demo>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'content', type: 'ReactNode', required: true, desc: '提示内容' },
|
||
{ name: 'placement', type: "'top' | 'bottom'", defaultValue: "'top'", desc: '出现方向' },
|
||
{ name: 'children', type: 'ReactNode', required: true, desc: '触发元素（建议可聚焦）' },
|
||
]}
|
||
/>
|
||
|
||
<PropsTable
|
||
rows={[
|
||
{ name: 'content', type: 'ReactNode', required: true, desc: '面板内容' },
|
||
{ name: 'children', type: 'ReactNode', required: true, desc: '触发器' },
|
||
{ name: 'placement', type: "'bottom-start' | 'bottom-end'", defaultValue: "'bottom-start'", desc: '对齐方式' },
|
||
]}
|
||
/>
|
||
</Section>
|
||
)
|
||
}
|