Radix UI 3.0 发布，新的布局引擎

Radix UI 3.0 刚刚发布，带来了新的布局引擎、新的组件和自定义调色板生成器，这个版本的发布是向着成为构建现代应用程序的最佳组件库迈出了一大步。我们将在本文中介绍主要亮点。

自定义调色板

Radix Themes 配备了近 30 种颜色比例，每种都有自己的浅色、深色和 alpha 变体。在内部，颜色系统由 Radix Colors 提供支持。

Radix Colors 是一个全面的色彩系统，用于设计美观、易于访问的网站和应用程序。

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

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

新组件

Radix Themes 3.0 引入了许多用于构建仪表板和数据密集型界面的新组件。它们的构建和设计符合您对 Radix 的期望，并且像往常一样，键盘和屏幕阅读器用户也可以使用它们。以下是主要亮点的快速概述。

Spinner 旋转器

Spinner 是一个简单的动画加载指示器。它配备了一个直观的 API，可以在子级加载完成后有条件地渲染它们。实现看起来毫不费力——本来就是这样的。

Spinner 在获取数据时保留子维度，因此状态之间没有布局转换。这是处理应用程序中加载状态的一种符合人体工程学的方法，因为它最大限度地减少了常见情况下所需的代码分支量。

Skeleton 骨骼

Skeleton 是此版本中的另一个加载组件。Skeleton 具有与 Spinner 类似的 API，但它也完全采用子组件的形状和大小，因此您可以使用与实际中使用的布局完全相同的布局来构建骨架界面。

Segmented Control 分段控制

Segmented Control 采用了熟悉的切换按钮设计，用于在值之间切换。Segmented Control 包了许多精心制作的隐形细节。例如，在活动项目上使用了更加粗体的字重，但没有布局移位，并且动画调整得非常平滑，即使是字重变化也能过渡顺畅。

Data List 数据列表

Data List 是用于显示一组键值对的组件。Data List 有什么特别之处？这是一个常见的模式，看似简单却很难做到完美。在我们设计时，不得不整理出一个包含所有不同布局组合的秘密页面。

Reset 重置

与其他组件不同，Reset 是一个不可见的组件。Reset 会从任何 HTML 标记中删除默认的浏览器样式，并设置惯用的布局默认值，以便您可以在其之上构建自定义组件。

在大多数界面中，这些样式是全局的并影响整个应用程序，因此这往往是删除尽可能多的样式和保留常见默认值之间的折衷方案。 Reset 为几乎所有网站都需要的标准化样式的人体工程学带来了新的变化。

Radio Cards 单选卡片

Radio Cards 是从多个选择中选择一个值的常见模式。它们用于视觉上引人入胜的表单，其中每个选项相比普通的单选按钮具有更高权重。

Checkbox Cards 复选框卡片

Checkbox Cards 与 Radio Cards 类似，但用于选择多个值。

Progress 进度条

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

Tab Nav 选项卡导航

Tab Nav 是一个用于导航到不同视图的组件。它与类似的 Tabs 相辅相成，但它是建立在提供屏幕阅读器可访问性和针对链接定制键盘导航的 Navigation Menu 之上。

新的布局引擎

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

布局组件是 Radix Themes 的基础功能。它们只有五种：Box、Flex、Grid、Section 和 Container。这些组件用于将布局与内容和交互分离开来。

当您将布局问题与内容和交互分离时，您创建的组合会更易于维护和推理。这些组件允许您快速为应用程序中的视图、页面和其他交互元素添加结构。

更好的布局属性

在此版本中，布局组件已经添加了许多新的属性，并且它们接受的值已经进行了重大改动：用于处理 flex 和 grid 布局的 9 个新属性；用于控制布局组件尺寸的 4 个新属性；除了空间比例值之外，现在所有布局属性都接受有效的 CSS 值，包括在响应式对象语法中使用时。

响应式对象语法

在 Radix Themes 中，响应式对象语法是您如何在不离开 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 个 Props。它们共同构成了一个易于学习、快速掌握的系统，并为您在不切换文件和关注点分离的情况下，可以实现的目标设定了令人难以置信的高上限。

如果您从未使用过此类系统，我们建议您尝试一下。它是 Tailwind 的一个很好的替代品，Tailwind 是一个非常强大的工具，最初是为了相同的目的而构建的。然而，今天它已经发展成为一个完整的样式范例，不会阻止您动态创建复杂的样式，这可能会违反前面提到的关注点分离。

Radix Themes 布局具有实用程序类框架可能为布局提供的全部功能，但它也是类型安全的，并指导开发人员与他们正在构建的界面的其他部分保持清晰的边界。

独立布局组件

如果您只想使用 Radix Themes 中的布局组件那也是可以的。只需确保 Tree Shaking 在项目中可以正常工作，并导入布局 CSS：

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

使用 Astro 和 Remix 进行零配置设置

现在使用 Remix 和 Astro 设置 Radix 主题要容易得多。在 3.0 中，我们重新审视了库的构建方式，以确保对 ESM 环境的开箱即用支持。

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

贡献者

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