<Box maxWidth="600px">
<RadioCards.Root defaultValue="1" columns={{ initial: "1", sm: "3" }}>
<RadioCards.Item value="1">
<Flex direction="column" width="100%">
<Text weight="bold">8-core CPU</Text>
<Text>32 GB RAM</Text>
</Flex>
</RadioCards.Item>
<RadioCards.Item value="2">
<Flex direction="column" width="100%">
<Text weight="bold">6-core CPU</Text>
<Text>24 GB RAM</Text>
</Flex>
</RadioCards.Item>
<RadioCards.Item value="3">
<Flex direction="column" width="100%">
<Text weight="bold">4-core CPU</Text>
<Text>16 GB RAM</Text>
</Flex>
</RadioCards.Item>
</RadioCards.Root>
</Box>
此组件继承自 Radio Group 原始组件 的属性，并支持 通用的 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
尺寸 | 响应式<"1" | "2" | "3"> | "2" |
变体 | "surface" | "classic" | "surface" |
颜色 | 枚举 | 无默认值 |
高对比度 | 布尔值 | 无默认值 |
列数 | 响应式<枚举 | 字符串> | "repeat(auto-fit, minmax(160px, 1fr))" |
间距 | 响应式<枚举 | 字符串> | "4" |
组中可以被选中的一个项目。
使用 size 属性控制尺寸。
<Flex align="center" gap="3">
<RadioCards.Root size="1">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root size="2">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root size="3">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
使用 variant 属性控制视觉样式。
<Flex direction="column" gap="3" maxWidth="200px">
<RadioCards.Root variant="surface">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root variant="classic">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
使用 color 属性指定特定颜色。
<Flex direction="column" gap="3" maxWidth="200px">
<RadioCards.Root defaultValue="1" color="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Grid columns="2" gap="3" display="inline-grid">
<RadioCards.Root defaultValue="1" color="indigo">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="indigo" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="cyan" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="orange" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson">
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root defaultValue="1" color="crimson" highContrast>
<RadioCards.Item value="1">8-core CPU</RadioCards.Item>
</RadioCards.Root>
</Grid>
<Flex direction="column" gap="4" maxWidth="450px">
<RadioCards.Root columns="2" defaultValue="2">
<RadioCards.Item value="1">Off</RadioCards.Item>
<RadioCards.Item value="2">On</RadioCards.Item>
</RadioCards.Root>
<RadioCards.Root columns="2" defaultValue="2">
<RadioCards.Item value="1" disabled>
Off
</RadioCards.Item>
<RadioCards.Item value="2" disabled>
On
</RadioCards.Item>
</RadioCards.Root>
</Flex>