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

间距

空间比例和缩放选项概述。

空间比例

间距值源自 9 步比例，用于边距和内边距等属性。这些属性接受从 "1" 到 "9" 的数字字符串，对应于以下比例中的步长。

1
2
3
4
5
6
7
8
9
步长基准值
14px
28px
312px
416px
524px
632px
740px
848px
964px

空间比例 tokens

空间比例 tokens 也可以使用 CSS 变量访问。您可以使用这些 tokens 来设置自定义组件的样式，确保它们与主题的其余部分保持一致。

/* Space scale */

var(--space-1);

var(--space-2);

var(--space-3);

var(--space-4);

var(--space-5);

var(--space-6);

var(--space-7);

var(--space-8);

var(--space-9);

缩放

影响布局（间距、字体大小、行高）的值会根据主题中定义的 scaling 值相对缩放。此设置允许您在整个应用程序中统一缩放 UI 密度。

<Theme scaling="100%">

	<Card variant="surface">

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

			<Avatar size="3" src={person.image} fallback={person.name} />

			<Box>

				<Text as="div" size="2" weight="bold">

					{person.name}

				</Text>

				<Text as="div" size="2" color="gray">

					Approved invoice <Link>#3461</Link>

				</Text>

			</Box>

		</Flex>

	</Card>

</Theme>
90%
95%
100%
105%
110%

缩放因子

缩放因子 token 可以使用 --scaling CSS 变量访问。如果需要在应用程序中使用不同的缩放因子，可以在自定义样式中使用此 token，确保它们与主题的其余部分保持一致。

.MyCustomComponent {

	width: calc(200px * var(--scaling));

}
上一个排版
下一个断点
在 GitHub 上编辑此页。