单选卡片

一组交互式卡片，每次只能选择一张。

View source Report an issue View in Playground

<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核CPU</Text>
				<Text>32 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
		<RadioCards.Item value="2">
			<Flex direction="column" width="100%">
				<Text weight="bold">6核CPU</Text>
				<Text>24 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
		<RadioCards.Item value="3">
			<Flex direction="column" width="100%">
				<Text weight="bold">4核CPU</Text>
				<Text>16 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
	</RadioCards.Root>
</Box>

API 参考

此组件继承自单选组原语的属性，并支持常见的边距属性。

根组件

Prop	Type	Default
`asChild`	`boolean`	No default value
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"surface" \| "classic"`	`"surface"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value
`columns`	`Responsive<enum \| string>`	`"repeat(auto-fit, minmax(160px, 1fr))"`
`gap`	`Responsive<enum \| string>`	`"4"`

项目

组中的一个项目，可以被选中。

示例

尺寸

使用 size 属性来控制尺寸。

<Flex align="center" gap="3">
	<RadioCards.Root size="1">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root size="2">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root size="3">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>
</Flex>

变体

使用 variant 属性来控制视觉样式。

<Flex direction="column" gap="3" maxWidth="200px">
	<RadioCards.Root variant="surface">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root variant="classic">
		<RadioCards.Item value="1">8核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核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="cyan">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="orange">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="crimson">
		<RadioCards.Item value="1">8核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核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="indigo" highContrast>
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="cyan">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="cyan" highContrast>
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="orange">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="orange" highContrast>
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="crimson">
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root defaultValue="1" color="crimson" highContrast>
		<RadioCards.Item value="1">8核CPU</RadioCards.Item>
	</RadioCards.Root>
</Grid>

禁用

<Flex direction="column" gap="4" maxWidth="450px">
	<RadioCards.Root columns="2" defaultValue="2">
		<RadioCards.Item value="1">关闭</RadioCards.Item>
		<RadioCards.Item value="2">开启</RadioCards.Item>
	</RadioCards.Root>

	<RadioCards.Root columns="2" defaultValue="2">
		<RadioCards.Item value="1" disabled>
			关闭
		</RadioCards.Item>
		<RadioCards.Item value="2" disabled>
			开启
		</RadioCards.Item>
	</RadioCards.Root>
</Flex>

上一篇单选框组合 Radio Group

下一篇滚动区域 Scroll Area

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

单选卡片