Radix 主题 3.0

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

介绍

Radix 主题 3.0 现已发布。此版本是 Radix 主题成为构建现代应用程序的最佳组件库迈出的重要一步。我们将在这篇文章中介绍主要亮点。

有关完整的更改日志和迁移指南，请参阅 发行说明。

自定义调色板

Radix 主题包含近 30 种色阶，每种色阶都有自己的亮色、暗色和 Alpha 变体。在幕后，颜色系统由 Radix 颜色 提供支持。

每个色阶都经过调整，以提供完全可访问的对比度比，每个色阶都有对应于背景、交互式组件、边框和文本的步骤。为您提供有史以来最美观和最直观的颜色系统。

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

创建自定义调色板 →

新组件

Radix 主题 3.0 引入了一些用于构建仪表板和数据密集型界面的新组件。它们的设计和构建都秉承了您对 Radix 的期望，并且像往常一样，它们对键盘和屏幕阅读器用户来说是可访问的。以下是主要亮点的简要概述。

加载器

加载器是一个简单的动画加载指示器。

<Spinner />

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

// Inside the button:
<Spinner loading={loading}>
  <CubeIcon />
</Spinner>

实现起来非常轻松，这正是它应该有的样子。加载器在数据被获取时保留子元素的尺寸，因此状态之间没有布局偏移。这是一种符合人体工程学的方式来处理应用程序中的加载状态，因为它最大程度地减少了常见情况下所需的代码分支。

骨架

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

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

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

分段控制

分段控制为在值之间切换的切换按钮提供熟悉的体验。

分段控制包含许多精心打造的细节，但它们是不可见的。例如，活动项目使用了更粗的字体粗细，但没有布局偏移，并且动画经过调整，即使字体粗细变化也能平滑过渡。以下是用慢动作播放的相同演示。

数据列表

数据列表 是用于显示键值对列表的组件。

数据列表有什么特别之处？这是一个看似简单但实际上很难处理好的模式。我们不得不创建一个 秘密页面，其中包含我们设计的所有不同的布局组合

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

重置

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

<Reset>
  <button>Button</button>
</Reset>

重置会从任何 HTML 标签中删除默认的浏览器样式，并设置惯用的布局默认值，以便您可以在其上构建自定义组件。

在大多数界面中，这些样式是全局的，会影响整个应用程序，因此这往往是在尽可能多地删除样式和保留常见默认值之间的妥协。重置为几乎每个网站都需要使用的规范化样式提供了新的符合人体工程学的设计。

单选卡

单选卡 是一个用于从多个选项中选择一个值的常见模式。它们用于视觉效果更强的表单，其中每个选项与常规单选按钮相比，具有更大的权重。

复选框卡

复选框卡 与单选卡类似，但用于选择多个值。

进度条

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

标签导航

标签导航 是一个用于导航到不同视图的组件。它补充了外观相似的 标签 组件，但它是建立在导航菜单基本组件之上的，该组件提供屏幕阅读器可访问性和针对链接量身定制的键盘导航。

新的布局引擎

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

布局组件是 Radix 主题的核心功能。只有五个——盒子、弹性盒子、网格、部分 和 容器。这些组件用于将布局责任与内容和交互性分开。当您将布局问题与内容和交互性分开时，您创建的组合将更加易于维护和理解。

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

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

更好的布局属性

在此版本中，布局组件获得了许多新的属性，并且它们接受的值也进行了重大修改。

• 用于处理弹性盒子和网格布局的 9 个新属性
• 用于控制布局组件尺寸的 4 个新属性
• 除了 间距比例值 之外，所有布局属性现在都接受有效的 CSS 值，包括在使用响应式对象语法时。

响应式对象语法

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

请考虑以下代码片段

<Flex width="500px" />

这将创建一个宽 500px 的弹性盒布局。但是，如果您想在移动设备上使用不同的宽度呢？使用响应式对象语法可以实现这一点，您可以在其中指定在特定断点处使用的值

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

独立布局组件

如果您只想使用 Radix Themes 中的布局组件，也是可以的。只需确保您的 JavaScript 树摇动有效，并导入布局基本 CSS

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

Astro 和 Remix 的零配置设置

Radix Themes 现在更容易在 Remix 和 Astro 中设置。在 3.0 版本中，我们重新审视了库的构建方式，以确保开箱即用地支持 ESM 环境。

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

贡献者

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

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