blob: 1f5f1add6843a41b40b6f3f1b4d4f7be41bc51d6 (
plain)
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
|
import { useState } from 'react'
import { Button } from '@astryxdesign/core/Button'
import { HStack } from '@astryxdesign/core/HStack'
import { Icon } from '@astryxdesign/core/Icon'
import { IconButton } from '@astryxdesign/core/IconButton'
import { Kbd } from '@astryxdesign/core/Kbd'
import { Link } from '@astryxdesign/core/Link'
import {
SegmentedControl,
SegmentedControlItem,
} from '@astryxdesign/core/SegmentedControl'
import { Text } from '@astryxdesign/core/Text'
import { ToggleButton, ToggleButtonGroup } from '@astryxdesign/core/ToggleButton'
import { Toolbar } from '@astryxdesign/core/Toolbar'
import { VStack } from '@astryxdesign/core/VStack'
import { Heart, List, LayoutGrid } from 'lucide-react'
export function ActionsDemo() {
const [layout, setLayout] = useState('网格')
const [view, setView] = useState('概览')
return (
<VStack gap={4}>
<Toolbar
label="常用操作"
startContent={
<HStack gap={2} wrap="wrap">
<Button label="主要操作" variant="primary" size="sm" />
<Button label="次要操作" variant="secondary" size="sm" />
<Button label="幽灵按钮" variant="ghost" size="sm" />
</HStack>
}
endContent={
<IconButton
label="收藏"
tooltip="收藏"
variant="ghost"
icon={<Icon icon={Heart} />}
/>
}
/>
<HStack gap={4} wrap="wrap" vAlign="center">
<ToggleButtonGroup
label="调整视图布局"
value={layout}
onChange={(value) => setLayout((value as string | null) ?? '网格')}
size="sm">
<ToggleButton
label="网格"
value="网格"
icon={<Icon icon={LayoutGrid} size="sm" />}
/>
<ToggleButton
label="列表"
value="列表"
icon={<Icon icon={List} size="sm" />}
/>
</ToggleButtonGroup>
<SegmentedControl
label="切换视图"
value={view}
onChange={setView}
size="sm">
<SegmentedControlItem label="概览" value="概览" />
<SegmentedControlItem label="活动" value="活动" />
<SegmentedControlItem label="成员" value="成员" />
</SegmentedControl>
</HStack>
<HStack gap={3} vAlign="center" wrap="wrap">
<Link href="/about" isStandalone>
查看关于页
</Link>
<Text type="supporting" size="sm">
快捷键
</Text>
<Kbd keys="mod+k" />
</HStack>
</VStack>
)
}
|
