Radix 首页
WorkOS 出品
Radix 首页
WorkOS 出品
主题主题基元基元图标图标颜色颜色
文档游乐场博客
指南

半径

在您的主题中选择合适的半径设置。

主题设置

主题 radius 设置管理应用于组件的半径因子

<Theme radius="medium">

	<TextField.Root size="3" placeholder="Reply…">

		<TextField.Slot side="right" px="1">

			<Button size="2">Send</Button>

		</TextField.Slot>

	</TextField.Root>

</Theme>
无
小
中
大
完整

最终的 border-radius 是上下文相关的，并且因组件而异。例如，当设置为 full 时，按钮 会变成药丸状，而 复选框 永远不会完全变圆，以防止它与 单选按钮 之间产生任何混淆。

<Theme radius="full">

	<Flex align="center" gap="3">

		<Button>Save</Button>

		<Switch defaultChecked />

		<Checkbox defaultChecked />

	</Flex>

</Theme>

半径覆盖

某些组件允许您使用它们自己的 radius 属性来覆盖半径因子。

<Flex align="center" gap="3">

	<Button radius="none">Save</Button>

	<Button radius="small">Save</Button>

	<Button radius="medium">Save</Button>

	<Button radius="large">Save</Button>

	<Button radius="full">Save</Button>

</Flex>

渲染面板的组件，如 Card、Dialog 和 Popover 等，不会有 radius 属性，但会从主题继承半径设置。radius 属性在大多数基于文本的组件上也不可用。

半径比例

组件中使用的半径值来自 6 步比例。

1
2
3
4
5
6

虽然您不能直接在特定组件上使用特定步骤——radius 属性仅用于设置半径因子——但您可以使用半径比例来设置自定义组件的样式。

半径令牌使用 CSS 变量访问。您可以使用这些令牌来设置自定义组件的样式，确保它们与主题的其余部分保持一致。

/* Radius values that automatically respond to the radius factor */

var(--radius-1);

var(--radius-2);

var(--radius-3);

var(--radius-4);

var(--radius-5);

var(--radius-6);



/* A multiplier that controls the theme radius */

var(--radius-factor);



/*

 * A variable used to calculate a fully rounded radius.

 * Usually used within a CSS `max()` function.

 */

var(--radius-full);



/*

 * A variable used to calculate radius of a thumb element.

 * Usually used within a CSS `max()` function.

 */

var(--radius-thumb);
上一个断点
下一个阴影
在 GitHub 上编辑此页。