blob: 41ca918ce8a6d8a9d277acb4ca09f63392df9b1d (
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
|
import { useState } from 'react'
import {
CheckboxList,
CheckboxListItem,
} from '@astryxdesign/core/CheckboxList'
import { Grid } from '@astryxdesign/core/Grid'
import { RadioList, RadioListItem } from '@astryxdesign/core/RadioList'
import { Slider } from '@astryxdesign/core/Slider'
export function SelectionDemo() {
const [notifications, setNotifications] = useState<string[]>(['email'])
const [plan, setPlan] = useState('team')
const [volume, setVolume] = useState(60)
return (
<Grid columns={{ minWidth: 220, max: 2 }} gap={5}>
<CheckboxList
label="通知方式"
description="可以选择多个渠道。"
value={notifications}
onChange={setNotifications}
hasDividers>
<CheckboxListItem
label="邮件"
value="email"
description="每周一发送摘要"
/>
<CheckboxListItem
label="推送"
value="push"
description="在设备上即时提醒"
/>
<CheckboxListItem
label="短信"
value="sms"
description="仅用于重要通知"
/>
</CheckboxList>
<RadioList label="当前套餐" value={plan} onChange={setPlan}>
<RadioListItem label="个人版" value="personal" />
<RadioListItem label="团队版" value="team" />
<RadioListItem label="企业版" value="enterprise" />
</RadioList>
<Slider
label="提醒音量"
value={volume}
onChange={setVolume}
width="100%"
valueDisplay="text"
/>
</Grid>
)
}
|
