zui

Appearance

组件列表 ​

欢迎使用 zui 组件库。这里提供了丰富的 Vue 组件，帮助您快速构建美观、功能完备的用户界面。

组件分类 ​

基础组件 - Button 按钮 - 用于触发操作的基础按钮组件 - ButtonGroup 组合按钮 - 将多个按钮组合在一起使用 - Icon 图标 - 提供丰富的图标支持 - Divider 分割线 - 用于分隔内容区域
布局组件 - Grid 网格布局 - 基于行和列的灵活布局系统 - Space 间距 - 控制组件之间的间距 - Accordion 手风琴 - 可折叠的内容面板 - Card 卡片 - 用于展示相关信息的卡片容器 - Tabs 选项卡 - 用于切换不同内容区域
表单组件 - Input 输入框 - 用于文本输入 - Textarea 文本域 - 用于多行文本输入 - Radio 单选框 - 用于单选操作 - Checkbox 多选框 - 用于多选操作 - Switch 开关 - 用于开关状态切换 - Select 选择器 - 用于从选项列表中选择 - Slider 滑动条 - 用于通过拖拽滑块来输入数值 - Form 表单 - 表单容器，支持数据收集和验证
交互反馈 - Tooltip 提示 - 鼠标悬停时显示的提示信息 - Popover 弹出层 - 点击元素时弹出的内容面板
导航组件 - Sidebar 侧边栏 - 提供导航菜单的侧边栏组件 - Menubar 菜单栏 - 提供顶部导航菜单的组件

使用指南 ​

安装 ​

bash
npm install zui
# 或
yarn add zui

引入组件 ​

javascript
// 全局引入
import { createApp } from 'vue'
import App from './App.vue'
import zui from 'zui'
import 'zui/dist/style.css'

const app = createApp(App)
app.use(zui)
app.mount('#app')

// 按需引入
import { Button, Input } from 'zui'
import 'zui/dist/style.css'

export default {
  components: {
    Button,
    Input
  }
}

版本说明 ​

请查看 更新日志 了解各版本的更新内容。