Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题基本组件基本组件图标图标颜色颜色
文档游乐场博客
指南

间距

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

空间比例

间距值来自一个 9 步比例，用于 margin 和 padding 等属性。这些属性接受从 "1" 到 "9" 的数字字符串，对应于下面比例中的步长。

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

空间比例令牌

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

/* 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%

缩放因子

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

.MyCustomComponent {

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

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