1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { useEffect, useRef, useState } from 'react'
import { Button, Text } from '@react-spectrum/s2/Button'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { ToggleButton } from '@react-spectrum/s2/ToggleButton'
import { ActionMenu, MenuItem } from '@react-spectrum/s2/ActionMenu'
import { Badge } from '@react-spectrum/s2/Badge'
import { StatusLight } from '@react-spectrum/s2/StatusLight'
import { ProgressBar } from '@react-spectrum/s2/ProgressBar'
import { ProgressCircle } from '@react-spectrum/s2/ProgressCircle'
import { Meter } from '@react-spectrum/s2/Meter'
import { InlineAlert, Heading, Content } from '@react-spectrum/s2/InlineAlert'
import { DialogTrigger, Dialog, ButtonGroup } from '@react-spectrum/s2/Dialog'
import { Popover } from '@react-spectrum/s2/Popover'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import { ToastContainer, ToastQueue } from '@react-spectrum/s2/Toast'
import AddIcon from '@react-spectrum/s2/icons/Add'
import EditIcon from '@react-spectrum/s2/icons/Edit'
import InfoIcon from '@react-spectrum/s2/icons/InfoCircle'
import styles from './ui-kit.module.css'
export default function ActionsFeedback() {
const [message, setMessage] = useState('点击按钮体验交互。')
const [selected, setSelected] = useState(false)
const [progress, setProgress] = useState(40)
const toastClosers = useRef<Array<() => void>>([])
useEffect(() => () => { toastClosers.current.forEach((close) => close()) }, [])
return (
<>
<section className={styles.section} aria-labelledby="kit-buttons">
<h2 id="kit-buttons">按钮与操作</h2>
<div className={styles.row}>
<Button variant="primary" onPress={() => setMessage('已点击主要按钮。')}>主要按钮</Button>
<Button variant="secondary" onPress={() => setMessage('已点击次要按钮。')}>次要按钮</Button>
<Button variant="accent" onPress={() => setMessage('已点击强调按钮。')}><AddIcon /><Text>新建</Text></Button>
<Button variant="negative" onPress={() => setMessage('这是危险操作的样式示例。')}>危险操作</Button>
<Button isDisabled>禁用按钮</Button>
</div>
<div className={styles.row}>
{(['S', 'M', 'L', 'XL'] as const).map((size) => <Button key={size} size={size} variant="secondary" onPress={() => setMessage(`已点击 ${size} 尺寸按钮。`)}>{size}</Button>)}
<TooltipTrigger><ActionButton aria-label="编辑示例" onPress={() => setMessage('已点击图标按钮。')}><EditIcon /></ActionButton><Tooltip>编辑示例</Tooltip></TooltipTrigger>
<ToggleButton isSelected={selected} onChange={setSelected}>{selected ? '已收藏' : '收藏'}</ToggleButton>
<ActionMenu aria-label="更多示例操作" onAction={(key) => setMessage(key === 'copy' ? '已选择复制示例。' : '已选择重命名示例。')}>
<MenuItem id="copy">复制</MenuItem><MenuItem id="rename">重命名</MenuItem>
</ActionMenu>
</div>
<p role="status" className={styles.caption}>{message}</p>
</section>
<section className={styles.section} aria-labelledby="kit-status">
<h2 id="kit-status">徽标与状态</h2>
<div className={styles.row}>
<Badge variant="neutral">默认</Badge><Badge variant="informative">信息</Badge><Badge variant="positive">成功</Badge><Badge variant="notice">提醒</Badge><Badge variant="negative">错误</Badge><Badge variant="accent">强调</Badge>
</div>
<div className={styles.row}>
<StatusLight variant="positive">已完成</StatusLight><StatusLight variant="notice">待处理</StatusLight><StatusLight variant="negative">失败</StatusLight><StatusLight variant="neutral">草稿</StatusLight>
</div>
<div className={styles.grid}>
<InlineAlert variant="informative"><Heading>信息提示</Heading><Content>用于展示与当前操作相关的说明。</Content></InlineAlert>
<InlineAlert variant="positive"><Heading>成功提示</Heading><Content>这是一条成功状态示例。</Content></InlineAlert>
<InlineAlert variant="notice"><Heading>注意事项</Heading><Content>操作前需要留意的提示信息。</Content></InlineAlert>
<InlineAlert variant="negative"><Heading>错误提示</Heading><Content>展示问题原因及后续处理方式。</Content></InlineAlert>
</div>
</section>
<section className={styles.section} aria-labelledby="kit-progress">
<h2 id="kit-progress">进度与容量</h2>
<div className={styles.grid}>
<ProgressBar label="示例进度" value={progress} />
<Meter label="已用容量" value={65} variant="notice" />
<ProgressBar label="不确定进度" isIndeterminate />
<div className={styles.row}><ProgressCircle aria-label="正在加载" isIndeterminate /><span>加载中</span></div>
</div>
<div className={styles.row}>
<Button variant="secondary" isDisabled={progress === 100} onPress={() => setProgress((value) => Math.min(value + 20, 100))}>增加进度</Button>
<Button variant="secondary" onPress={() => setProgress(0)}>重置进度</Button>
</div>
</section>
<section className={styles.section} aria-labelledby="kit-overlays">
<h2 id="kit-overlays">弹层与通知</h2>
<div className={styles.row}>
<DialogTrigger>
<Button variant="secondary">打开对话框</Button>
<Dialog size="S">
{({ close }) => <><Heading>对话框示例</Heading><Content>对话框用于需要用户确认的操作。</Content><ButtonGroup><Button variant="secondary" onPress={close}>取消</Button><Button variant="primary" onPress={() => { setMessage('已确认对话框。'); close() }}>确认</Button></ButtonGroup></>}
</Dialog>
</DialogTrigger>
<DialogTrigger>
<Button variant="secondary">打开 Popover</Button>
<Popover aria-label="Popover 示例"><div className={styles.popover}><InfoIcon /><p>Popover 用于在操作附近展示补充内容，点击外部或按 Esc 关闭。</p></div></Popover>
</DialogTrigger>
<TooltipTrigger><Button variant="secondary">悬停查看提示</Button><Tooltip>这是一条 Tooltip 提示。</Tooltip></TooltipTrigger>
<Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.positive('这是一条成功通知。', { timeout: 5000 }))}>成功通知</Button>
<Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.negative('这是一条错误通知示例。', { timeout: 5000 }))}>错误通知</Button>
</div>
</section>
<ToastContainer />
</>
)
}
|
