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 上编辑此页面。