跳至内容

介绍

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

提示

Radix Vue 是 Radix UI 的非官方社区主导的 Vue 移植版本,因此我们在构建基本元素时共享相同的原则和愿景。

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

愿景

我们大多数人对常见 UI 模式(如手风琴、复选框、组合框、对话框、下拉菜单、选择、滑块和工具提示)有类似的定义。这些 UI 模式由 WAI-ARIA 文档化,并且通常为社区所理解。

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

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

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

主要功能

无障碍

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

无样式

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

开放

Radix Primitives 旨在根据您的需求进行定制。我们的开放组件架构为您提供了对每个组件部分的细粒度访问权限,因此您可以对其进行包装并添加自己的事件监听器、道具或引用。

不受控制

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

开发人员体验

我们的主要目标之一是提供最佳的开发人员体验。Radix Primitives 提供了完全类型的 API。所有组件都共享类似的 API,从而创造出始终如一且可预测的体验。我们还实施了 asChild 道具(这对 Vue 来说不是问题),让用户可以完全控制渲染的元素。

支持树摇

我们将所有基本元素编译成一个包,因此您只需安装一次,就可以访问所有基本元素。不用担心,它是支持树摇的,因此任何未使用的基本元素都不会包含在捆绑包中。

sh
$ npm add radix-vue

社区

Discord

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

加入我们的 Discord

Twitter

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

在 Twitter 上关注 Radix

GitHub

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

GitHub 仓库

行为准则