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
|
import { useState } from 'react'
import { Tabs, TabList, Tab, TabPanel } from '@react-spectrum/s2/Tabs'
import { Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel } from '@react-spectrum/s2/Accordion'
import { Breadcrumbs, Breadcrumb } from '@react-spectrum/s2/Breadcrumbs'
import { TagGroup, Tag } from '@react-spectrum/s2/TagGroup'
import { Button } from '@react-spectrum/s2/Button'
import { Card, CardPreview, Content, Text, Footer } from '@react-spectrum/s2/Card'
import { TableView, TableHeader, Column, TableBody, Row, Cell, type Selection, type SortDescriptor } from '@react-spectrum/s2/TableView'
import { StatusLight } from '@react-spectrum/s2/StatusLight'
import EditIcon from '@react-spectrum/s2/icons/Edit'
import styles from './ui-kit.module.css'
const initialTags = ['设计', '开发', '文档']
const rows = [
{ id: 'buttons', name: '按钮', category: '基础操作', status: '已完成' },
{ id: 'navigation', name: '导航', category: '页面组织', status: '已完成' },
{ id: 'form', name: '表单', category: '数据输入', status: '示例' },
]
export default function NavigationData() {
const [tags, setTags] = useState(initialTags)
const [selection, setSelection] = useState<Selection>(new Set())
const [sort, setSort] = useState<SortDescriptor>({ column: 'name', direction: 'ascending' })
const sortedRows = [...rows].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN') * (sort.direction === 'descending' ? -1 : 1))
return (
<>
<section className={styles.section} aria-labelledby="kit-navigation">
<h2 id="kit-navigation">导航与内容组织</h2>
<Breadcrumbs><Breadcrumb href="/">Home</Breadcrumb><Breadcrumb>UI Kit</Breadcrumb></Breadcrumbs>
<Tabs aria-label="组件内容示例" defaultSelectedKey="overview">
<TabList aria-label="组件内容示例"><Tab id="overview">概览</Tab><Tab id="details">详情</Tab><Tab id="disabled" isDisabled>禁用</Tab></TabList>
<TabPanel id="overview"><p className={styles.tabContent}>这是概览面板。点击“详情”切换内容。</p></TabPanel>
<TabPanel id="details"><p className={styles.tabContent}>这是详情面板。也可以使用键盘方向键切换标签。</p></TabPanel>
</Tabs>
<Accordion allowsMultipleExpanded defaultExpandedKeys={['usage']}>
<AccordionItem id="usage"><AccordionItemTitle>组件如何交互？</AccordionItemTitle><AccordionItemPanel>点击、聚焦或使用键盘体验组件的不同状态。</AccordionItemPanel></AccordionItem>
<AccordionItem id="theme"><AccordionItemTitle>如何查看暗色效果？</AccordionItemTitle><AccordionItemPanel>使用顶栏右上角的设置按钮切换亮色和暗色模式。</AccordionItemPanel></AccordionItem>
</Accordion>
</section>
<section className={styles.section} aria-labelledby="kit-tags">
<h2 id="kit-tags">标签与卡片</h2>
<TagGroup aria-label="可移除的示例标签" onRemove={(keys) => setTags((current) => current.filter((tag) => !keys.has(tag)))}>
{tags.map((tag) => <Tag key={tag} id={tag}>{tag}</Tag>)}
</TagGroup>
{tags.length === 0 && <p className={styles.caption}>标签已清空。</p>}
<div><Button variant="secondary" onPress={() => setTags(initialTags)}>恢复标签</Button></div>
<div className={styles.cards}>
<Card href="/form" aria-label="查看表单示例">
<CardPreview><div className={styles.cardPreview}><EditIcon /></div></CardPreview>
<Content><Text slot="title">表单组件</Text><Text slot="description">文本输入、选择、日期、颜色与文件控件。</Text></Content>
<Footer><StatusLight variant="informative">点击查看表单页面</StatusLight></Footer>
</Card>
<Card variant="secondary" aria-label="组件展示卡片">
<Content><Text slot="title">内容卡片</Text><Text slot="description">使用标题、描述和底部状态组织信息。</Text></Content>
<Footer><StatusLight variant="positive">静态展示</StatusLight></Footer>
</Card>
</div>
</section>
<section className={styles.section} aria-labelledby="kit-table">
<h2 id="kit-table">数据表格</h2>
<p className={styles.caption}>支持多选，点击“名称”可切换排序。</p>
<div className={styles.tableContainer}>
<TableView aria-label="组件示例列表" UNSAFE_className={styles.table} selectionMode="multiple" selectedKeys={selection} onSelectionChange={setSelection} sortDescriptor={sort} onSortChange={setSort}>
<TableHeader><Column id="name" isRowHeader allowsSorting>名称</Column><Column id="category">分类</Column><Column id="status">状态</Column></TableHeader>
<TableBody items={sortedRows}>{(row) => <Row id={row.id}><Cell>{row.name}</Cell><Cell>{row.category}</Cell><Cell>{row.status}</Cell></Row>}</TableBody>
</TableView>
</div>
<p role="status" className={styles.caption}>已选择 {selection === 'all' ? rows.length : selection.size} 项</p>
</section>
</>
)
}
|
