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
|
import { useState } from 'react'
import { Collapsible, CollapsibleGroup } from '@astryxdesign/core/Collapsible'
import { Grid } from '@astryxdesign/core/Grid'
import { Heading } from '@astryxdesign/core/Heading'
import { SelectableCard } from '@astryxdesign/core/SelectableCard'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'
const PLANS = [
{ id: 'basic', name: '基础版', price: '¥9/月', desc: '适合个人项目' },
{ id: 'pro', name: '专业版', price: '¥29/月', desc: '适合小型团队' },
{ id: 'team', name: '团队版', price: '¥99/月', desc: '适合协作组织' },
]
export function LayoutDemo() {
const [selected, setSelected] = useState('pro')
return (
<VStack gap={4}>
<Grid columns={{ minWidth: 140, max: 3 }} gap={3}>
{PLANS.map((plan) => (
<SelectableCard
key={plan.id}
label={plan.name}
isSelected={selected === plan.id}
onChange={() => setSelected(plan.id)}>
<VStack gap={1}>
<Heading level={4}>{plan.name}</Heading>
<Text type="large" weight="bold">
{plan.price}
</Text>
<Text type="supporting" size="sm">
{plan.desc}
</Text>
</VStack>
</SelectableCard>
))}
</Grid>
<CollapsibleGroup type="single" defaultValue="layout">
<Collapsible
value="layout"
trigger={<Text type="label">这个布局是如何组织的？</Text>}>
<Text type="body" color="secondary" as="p">
外层使用 Grid 负责响应式列数，SelectableCard 负责可选中的卡片语义，Collapsible
负责按需展开说明。所有间距都来自同一套 token。
</Text>
</Collapsible>
</CollapsibleGroup>
</VStack>
)
}
|
