Radix 主题 3.0

新的布局引擎、新组件和自定义调色板生成器。

介绍

Radix 主题 3.0 刚刚发布。此次更新是 Radix 主题朝着成为构建现代应用最佳组件库的一大飞跃。我们将在这篇文章中介绍主要亮点。

有关完整的更新日志和迁移指南，请查看 发布说明。

自定义调色板

Radix 主题提供近 30 种颜色比例，每种颜色都有自己的浅色、深色和透明变体。在后台，颜色系统由 Radix Colors 提供支持。

每个颜色比例都经过调优，以提供完全可访问的对比度比率，每个比例的步骤对应背景、交互组件、边框和文本。提供您所使用过的最美丽和直观的颜色系统。

今天，我们推出一个新工具，让您为 Radix 主题创建自己的品牌调色板。这是一个简单的界面，可以让您指定主要颜色、灰色和页面背景，从而生成可复制粘贴到主题样式中的颜色配置。

创建自定义调色板 →

新组件

Radix 主题 3.0 引入了多个新组件，用于构建仪表板和数据密集型界面。它们的构建和设计水平符合您对 Radix 的期待，通常也是为键盘和屏幕阅读器用户提供可访问性的。以下是主要亮点的快速概述。

旋转器

旋转器是一个简单的动画加载指示器：

<Spinner />

它具有直观的 API，可以在子元素加载完成时有条件地渲染它们。请考虑以下示例：

// 在按钮内：
<Spinner loading={loading}>
	<CubeIcon />
</Spinner>

实现看起来毫不费力——这就是应有的样子。旋转器在数据获取时保持子元素的尺寸，因此状态之间没有布局偏移。这是一种符合人体工程学的处理应用程序加载状态的方法，因为它最小化了在常见情况下所需的代码分支数量。

骨架

骨架是此版本中的另一个加载组件：

<Skeleton>
	<Button radius="full">按钮</Button>
</Skeleton>

骨架的 API 与旋转器类似，但它还完全采用子组件的形状和大小，因此您可以使用与真实布局完全相同的布局来构建骨架界面：

分段控制

分段控制采用了熟悉的设计，用于在值之间切换的切换按钮：

分段控制包含许多被设计为不可见的细节。例如，活动项使用了更粗的字体权重，但没有布局偏移，动画的设定让字体权重的变化也能平滑过渡。这里是同样的演示，速度放慢：

数据列表

数据列表 是一个用于显示键值对列表的组件：

数据列表有什么特别之处？这是一个常见的模式，实际上处理起来非常复杂。我们不得不组合一个秘密页面，以展示我们设计时考虑的所有不同布局组合：

• 不同长度的值
• 混合高度项目之间的一致节奏
• 标签和数值的可配置对齐
• 内部常见布局组合
• 前导修剪

重置

与其他组件不同， 重置 是一个不可见的组件：

<Reset>
	<button>按钮</button>
</Reset>

重置移除了任何 HTML 标签的默认浏览器样式，并设置符合习惯的布局默认值，使您可以在其之上构建自定义组件。

在大多数界面中，这些样式是全局的，影响整个应用，因此通常在尽可能移除和保留常见默认值之间存在权衡。重置为几乎任何网站所需的样式规范化带来了新的人体工程学思路。

单选卡片

单选卡片 是从多个选项中选择单个值的常见模式。它们用于视觉上引人入胜的表单，其中每个选项与常规单选按钮相比更具权重：

复选框卡片

复选框卡片 类似于单选卡片，但用于选择多个值：

进度

进度 是另一个加载组件。它可以用于指示任务的进度，或使用模糊动画指示不确定的进度：

标签导航

标签导航 是一个用于导航到不同视图的组件。它补充了相似的 选项卡 组件，但基于导航菜单原语构建，它提供了针对链接的屏幕阅读器可访问性和键盘导航。

新布局引擎

新的引擎使布局组件及其属性更强大、更易于使用。

布局组件是 Radix 主题的基石功能。它们仅有五个——Box、Flex、Grid、Section 和 Container。这些组件用于将布局职责与内容和交互性分开。当您将布局 concerns 从内容和交互性中分离时，您创建的组合将更加可维护和易于理解。

这些组件允许您快速为视图、页面和应用程序中其他交互元素添加结构。

您可以在布局指南中了解有关布局组件及其属性的更多信息。

更好的布局属性

在此版本中，布局组件获得了一些新属性，并且它们接受的值也进行了显著修改：

• 9 个新属性，用于处理灵活和网格布局
• 4 个新属性，用于控制布局组件的尺寸
• 除了 空间比例值 外，所有布局属性现在还接受有效的 CSS 值，包括与响应对象语法一起使用时。

响应对象语法

在 Radix 主题中，响应对象语法 是在不同断点上构建响应布局的方式，而无需离开组合您应用程序本身的 React 代码。

考虑以下代码：

<Flex width="500px" />

这将创建一个宽度为 500px 的 flexbox 布局。但是，如果您想在手机上使用不同的宽度呢？这可以使用响应对象语法来完成，您可以指定在特定断点上使用的值：

<Flex width={{ initial: "100%", sm: "300px", md: "500px" }} />

现在，除了 空间比例值 外，布局属性将支持有效的 CSS 值。例如，可以在特定断点上使用 100px、50vw，或甚至像 calc(100vw - 200px) 这样的表达式。

然而，它的性能如何？它与服务器组件一起使用效果如何？那么，这就是上述 <Flex> 元素实际渲染到 DOM 的方式：

<div
	style={{ "--width": "100%", "--width-md": "500px", "--width-sm": "300px" }}
	class="rt-Flex rt-r-w sm:rt-r-w md:rt-r-w"
/>

您可以看到 <Flex> 元素被编译为一组实用程序类和 CSS 自定义属性。没有对断点的运行时评估，这意味着性能就像普通的 CSS 并且该组件可以在服务器上渲染。

两全其美

总体而言，有 5 个布局组件，每个组件几乎有 40 个属性。它们共同形成一个系统，易于学习，快速掌握，并为您提供了一个_惊人_的上限，您可以在不切换文件和失去动力的情况下实现。

如果您从未使用过这样的系统，我们建议您试一试。这是 Tailwind 的一个极好替代方案，Tailwind 是一个功能强大的工具，最初是为相同的目的——布局而构建的。然而，今天它已经演变为一个完整的样式范式，不会阻碍您随意创建复杂的样式，这可能会违反先前提到的关注点分离。

Radix 主题布局提供了实用类框架可能为布局提供的所有强大功能，同时还保持类型安全，并指导开发人员维护与他们正在构建的接口其他部分之间的明确边界。

独立布局组件

如果您想仅使用 Radix 主题中的布局组件，这也是可能的。只需确保 JavaScript 树摇动在您的环境中正常工作，并导入布局必要的 CSS：

import "@radix-ui/themes/layout.css";

与 Astro 和 Remix 的零配置设置

Radix 主题现在与 Remix 和 Astro 的设置变得更加容易。在 3.0 版本中，我们重新审视了库的构建方式，以确保原生支持 ESM 环境。

分发现在是一个混合的 ESM/CommonJS 包。根据您的设置，您的导入解析器现在会自动选择正确的版本。

贡献者

Radix 主题 3.0 是许多贡献者辛勤工作的结果。我们要感谢所有为此版本做出贡献的人，无论是通过代码、文档、设计或社区支持。

特别感谢 Alasdair McLeay、itsMapleLeaf 和 Sora Morimoto。