开源先行者

我们今天分享的是 Radix 开源出来的一套 Vue UI 工具，他的名字叫 radix-vue。

项目简介

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

最新版本发布时间
代码仓库许可证
最新贡献人员总数
仓库语言总数
GitHub 衍生总数
NPM 总下载数
GitHub 收藏总数
GitHub 关注者总数

功能特性

无障碍 组件尽可能遵循 WAI-ARIA 设计模式。我们处理许多与可访问性相关的困难实现细节，包括 aria 和角色属性、焦点管理和键盘导航。在我们的辅助功能概述中了解更多信息。
无样式 组件附带零样式，让您可以完全控制样式。可以使用任何样式解决方案（vanilla CSS、CSS 预处理器、CSS-in-JS 库）对组件进行样式设置。在我们的造型指南中了解更多信息。
开放性 Radix 原语旨在根据您的需求进行定制。我们的开放组件架构为您提供对每个组件部分的精细访问，因此您可以包装它们并添加您自己的事件侦听器、道具或引用。
不受控制 在适用的情况下，组件默认不受控制，但也可以进行控制。所有行为连接都是在内部处理的，因此您可以尽可能顺利地启动和运行，而无需创建任何本地状态。
开发者经验 我们的主要目标之一是提供尽可能最佳的开发人员体验。 Radix Primitives 提供了完整类型的 API。所有组件共享相似的 API，从而创建一致且可预测的体验。我们还实现了一个 prop（这对 Vue 来说不是问题），让用户完全控制渲染的 element.asChild
友好性 我们将所有原语编译到一个包中，因此您只需安装一次，就可以访问所有原语。不用担心，它是摇树友好的，因此任何未使用的原语都不会包含在捆绑包中。

安装使用

使用 npm 安装

pnpm add radix-vue
# yarn add radix-vue
# npm i radix-vue

修改 vite 配置

import Component from 'unplugin-vue-components/vite'
import RadixVueResolver from 'radix-vue/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Component({
      dts: true,
      resolvers: [
        RadixVueResolver()

        // RadixVueResolver({
        //   prefix: '' // use the prefix option to add Prefix to the imported components
        // })
      ],
    }),
  ],
})

注册使用

官方推荐直接全局注册，并按需引用。

import { Style, Button } from 'radix-vue'

// 全局注册
Vue.use(Button)
// ...

更多使用方式可参考快速上手

支持组件

Accordion
Alert Dialog
Aspect Ratio
Avatar
Checkbox
Collapsible
Combobox
Context Menu
Dialog
Dropdown Menu
Hover Card
Label
Menubar
Navigation Menu
Pagination
Pin Input
Popover
Progress
Radio Group
Scroll Area
Select
Separator
Slider
Switch
Tabs
Tags Input
Toast
Toggle
Toggle Group
Toolbar
Tooltip

项目截图

由于是前端项目包含各种组件我们不再这里添加多余截图，建议有兴趣的小伙伴们自行体验。

文档地址：

https://radix-vue.com/

源码地址：

https://github.com/radix-vue/radix-vue