组件总览
ZC UI 是一个基于 Vue 3 + TypeScript 的企业级 UI 组件库，提供 60+ 高质量组件，覆盖布局、表单、数据展示、反馈、导航等常见业务场景。
特性
- 🎯 Vue 3 Composition API — 全面采用
<script setup>语法 - 📦 TypeScript — 完整类型定义，类型安全
- 🎨 设计 Token 系统 — 基于 CSS 自定义属性的主题方案
- 🔧 按需引入 — 支持 tree-shaking，减小打包体积
- 🌍 国际化 — 内置 i18n 支持
- ♿ 无障碍 — 支持 ARIA 标准和键盘导航
组件分类
基础组件
| 组件 | 说明 |
|---|---|
| Button | 按钮组件，支持多种类型、尺寸、图标 |
| Icon | 图标组件，基于 SVG |
布局组件
| 组件 | 说明 |
|---|---|
| Container | 布局容器 |
| Header | 顶部区域 |
| Aside | 侧边栏区域 |
| Main | 主要内容区域 |
| Footer | 底部区域 |
| Row | 栅格行 |
| Col | 栅格列 |
| Space | 间距组件 |
| Grid | CSS Grid 网格布局 |
| GridItem | 网格项 |
表单组件
| 组件 | 说明 |
|---|---|
| Input | 输入框 |
| InputNumber | 数字输入框 |
| Select | 下拉选择器 |
| Switch | 开关 |
| Checkbox | 多选框 |
| CheckboxGroup | 多选框组 |
| Radio | 单选框 |
| RadioGroup | 单选框组 |
| Form | 表单 |
| FormItem | 表单项 |
| DatePicker | 日期选择器 |
| TimePicker | 时间选择器 |
| AutoComplete | 自动补全 |
| ColorPicker | 颜色选择器 |
| Rate | 评分 |
| Slider | 滑块 |
| Upload | 文件上传 |
| Cascader | 级联选择器 |
| Transfer | 穿梭框 |
| Mention | 提及输入 |
| TreeSelect | 树形选择器 |
数据展示组件
| 组件 | 说明 |
|---|---|
| Table | 表格 |
| Tag | 标签 |
| Badge | 徽章 |
| Avatar | 头像 |
| Empty | 空状态 |
| Skeleton | 骨架屏 |
| Image | 图片预览 |
| Tree | 树形控件 |
| Descriptions | 描述列表 |
| Statistic | 统计数值 |
| Timeline | 时间线 |
| List | 列表 |
| Carousel | 走马灯 |
反馈组件
| 组件 | 说明 |
|---|---|
| Dialog | 对话框 |
| Drawer | 抽屉 |
| Tooltip | 文字提示 |
| Popconfirm | 气泡确认框 |
| Message | 消息提示 |
| Notification | 通知提醒 |
| Loading | 加载 |
| Alert | 警告提示 |
| Progress | 进度条 |
| Result | 结果页 |
| Watermark | 水印 |
导航组件
| 组件 | 说明 |
|---|---|
| Menu | 导航菜单 |
| Tabs | 标签页 |
| Breadcrumb | 面包屑 |
| Dropdown | 下拉菜单 |
| Pagination | 分页 |
| Steps | 步骤条 |
| Anchor | 锚点 |
| Backtop | 回到顶部 |
| Affix | 固钉 |
其他组件
| 组件 | 说明 |
|---|---|
| Card | 卡片 |
| Divider | 分割线 |
| Collapse | 折叠面板 |
| Scrollbar | 滚动条 |
使用下方搜索框和分类标签，快速找到你需要的组件。
📐
布局组件
📦
容器与基础
📝
表单组件
共 61 个组件 · 第 1 / 6 页