HareUI
是一个Vue 3端口 HeroUI v3. 的可访问原语配对 河UI 的实用优先样式 顺风CSS v4,并保留了HeroUI的设计、令牌和组件API。
- 默认可访问键盘,焦点和屏幕阅读器行为来自Reka UI
- 顺风CSS v4:没有CSS-in- js运行时,主题通过CSS变量
- 和英雄一模一样:样式和标记是从HeroUI v3中翻译过来的
- Slot-based组成:我们的插槽和
as而不是深度嵌套的道具 - 零样板组件无需插件或提供商即可工作
开始使用
npm i @hareui/vue
将这些样式添加到你的主CSS文件中,在Tailwind之后:
@import 'tailwindcss';
@import '@hareui/vue';
使用组件:
<script setup lang="ts">
import { Button } from '@hareui/vue'
</script>
<template>
<Button>My Button</Button>
</template>
Vite插件(可选)
@hareui/vue/vite 自动导入模板中的组件(通过 unplugin-vue-components),并在构建时应用应用范围的主题覆盖:
// vite.config.ts
import hareui from '@hareui/vue/vite'
export default defineConfig({
plugins: [
vue(),
tailwindcss(),
hareui({
prefix: 'H', // <HButton> / <h-button>; default '' keeps <Button>
ui: { button: { slots: { base: 'uppercase' }, defaultVariants: { size: 'lg' } } },
}),
],
})
prefix: harei组件的模板前缀。Kebab-case ('h-')被接受。ui形状与…相同createHareUI({ ui });必须是json可序列化的。createHareUI({ ui })、变型道具;:ui和class仍然覆盖它。components:转发到unplugin-vue-components (dts,dirs,额外的resolvers,…),或者false关闭自动导入。
已经自己注册了unplugin-vue组件吗?添加 HareUIResolver({ prefix }) 从 @hareui/vue/vite 对其 resolvers 代替。
文档
访问 hareui.alexzvn.me 对于主题,暗模式,样式,构图和每个组件。人工智能工具可以读取文档 llms.txt 或者 llms-full.txt.
贡献
问题和拉请求是欢迎的 github.com/alexzvn/hareui.
许可证
麻省理工学院. 样式、符号和图标派生自HeroUI;看到 THIRD_PARTY_LICENSES.md.