概述

简介

一个开源 UI 组件库,用于构建高质量、无障碍的设计系统和 Web 应用程序。

Radix Primitives 是一个底层 UI 组件库,专注于无障碍功能、自定义和开发者体验。您可以将这些组件用作设计系统的基础层,或者逐步采用它们。

愿景

我们大多数人对于常见的 UI 模式(如手风琴、复选框、组合框、对话框、下拉菜单、选择框、滑块和工具提示)都有相似的定义。这些 UI 模式已由 WAI-ARIA 记录在案,并被社区普遍理解。

然而,Web 平台为我们提供的实现方案并不完善。它们要么不存在,要么功能不足,要么无法充分自定义。

因此,开发者被迫构建自定义组件;这是一项极其困难的任务。结果,Web 上的大多数组件都难以访问、性能不佳且缺乏重要功能。

我们的目标是创建一个资金充足的开源组件库,供社区用于构建无障碍的设计系统。

主要特性

无障碍功能

组件尽可能遵循 WAI-ARIA 设计模式。我们处理了许多与无障碍功能相关的复杂实现细节,包括 aria 和 role 属性、焦点管理和键盘导航。请在我们的无障碍功能概述中了解更多信息。

无样式

组件在发布时没有样式,让您可以完全控制外观和感觉。组件可以使用任何样式解决方案进行样式设置。请在我们的样式指南中了解更多信息。

开放式

Radix Primitives 旨在进行自定义以满足您的需求。我们的开放式组件架构为您提供对每个组件部分的精细访问权限,因此您可以包装它们并添加您自己的事件监听器、props 或 refs。

非受控

在适用的情况下,组件默认是非受控的,但也可以选择受控。所有行为的连接都在内部处理,因此您可以尽可能顺利地启动和运行,而无需创建任何本地状态。

开发者体验

我们的主要目标之一是提供尽可能最佳的开发者体验。Radix Primitives 提供完全类型化的 API。所有组件共享类似的 API,从而创建一致且可预测的体验。我们还实现了一个 asChild prop,让用户可以完全控制渲染的元素。

逐步采用

我们建议安装 radix-ui 包并导入您需要的 primitives。这是开始使用的最简单方法,可以防止版本冲突或重复,并使更新管理变得容易。该软件包是可 tree-shake 的,因此您应该只发布您使用的组件。

npm install radix-ui
import { Dialog, DropdownMenu, Tooltip } from "radix-ui";

或者,每个 primitive 都可以单独安装

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip
import * as Dialog from "@radix-ui/react-dialog";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import * as Tooltip from "@radix-ui/react-tooltip";

当单独安装时,我们建议一起更新所有 Radix 包,以防止共享依赖项重复并减小您的捆绑包大小。

社区

要参与 Radix 社区,提问和分享技巧,请加入我们的 Discord

要接收关于新 primitives、公告、博客文章和一般 Radix 技巧的更新,请在 BlueskyTwitter 上关注我们。

要提交问题、请求功能和贡献代码,请查看我们的 GitHub。

下一步开始使用