概述

简介

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

Radix 原生组件是一个低级 UI 组件库,专注于无障碍性、自定义性和开发人员体验。您可以将这些组件用作设计系统的基础层,也可以逐步采用它们。

愿景

我们大多数人对常见 UI 模式(如手风琴、复选框、组合框、对话框、下拉菜单、选择、滑块和工具提示)有相似的定义。这些 UI 模式是 由 WAI-ARIA 文档记录 并得到社区的普遍认可。

但是,Web 平台提供的实现不足。它们要么不存在,要么缺乏功能,要么无法充分自定义。

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

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

关键特征

无障碍

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

无样式

组件不带任何样式,让您可以完全控制样式。组件可以使用任何样式解决方案进行样式设置(原生 CSS、CSS 预处理器、CSS-in-JS 库)。在我们的 样式 指南中了解更多信息。

开放

Radix 原生组件旨在根据您的需求进行自定义。我们的开放式组件架构让您可以访问每个组件部分,以便您可以包装它们并添加自己的事件监听器、道具或引用。

不受控制

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

开发人员体验

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

增量采用

每个基本组件都可以单独安装,因此您可以逐步采用它们。

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip

基本组件也独立版本化,以进一步促进增量采用。

社区

Discord

加入我们的 Discord,参与 Radix 社区,提出问题并分享技巧。

加入我们的 Discord

Twitter

关注 Twitter,接收有关新基本组件、公告、博客文章和一般 Radix 技巧的更新。

关注 Twitter 上的 Radix

GitHub

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

GitHub 仓库 行为准则

下一步入门