Skip to content

组件总览 ​

ZC UI 是一个基于 Vue 3 + TypeScript 的企业级 UI 组件库,提供 80+ 高质量组件,覆盖布局、表单、数据展示、反馈、导航等常见业务场景。

特性 ​

  • 🎯 Vue 3 Composition API - 全面采用 <script setup> 语法
  • 📦 TypeScript - 完整类型定义,类型安全
  • 🎨 设计 Token 系统 - 基于 CSS 自定义属性的主题方案
  • 🔧 按需引入 - 支持 tree-shaking,减小打包体积
  • 🌍 国际化 - 内置 i18n 支持
  • ♿ 无障碍 - 支持 ARIA 标准和键盘导航

组件分类 ​

基础组件 ​

组件说明
Button按钮组件,支持多种类型、尺寸、图标
Icon图标组件,基于 SVG

布局组件 ​

组件说明
Container布局容器
Header顶部区域
Aside侧边栏区域
Main主要内容区域
Footer底部区域
Row栅格行
Col栅格列
Space间距组件
GridCSS Grid 网格布局
GridItem网格项
Carousel走马灯

容器与基础 ​

组件说明
Card卡片
Divider分割线
Collapse折叠面板
Scrollbar滚动条

表单组件 ​

组件说明
Input输入框
InputNumber数字输入框
AutoComplete自动补全
Select下拉选择器
Switch开关
Checkbox多选框
CheckboxGroup多选框组
Radio单选框
RadioGroup单选框组
Form表单
FormItem表单项
DatePicker日期选择器
TimePicker时间选择器
ColorPicker颜色选择器
Rate评分
Slider滑块
Upload文件上传
Cascader级联选择器
Transfer穿梭框
Mention提及输入
TreeSelect树形选择器

数据展示组件 ​

组件说明
Table表格
Tag标签
Badge徽章
Avatar头像
Empty空状态
Skeleton骨架屏
Image图片预览
Tree树形控件
Descriptions描述列表
Statistic统计数值
Countdown倒计时
Timeline时间线
List列表
Carousel走马灯
Calendar日历
Steps步骤条
Progress进度条
Result结果页
Watermark水印
QRCode二维码

反馈组件 ​

组件说明
Dialog对话框
Drawer抽屉
Tooltip文字提示
Popover弹出框
Popconfirm气泡确认框
Message消息提示
Notification通知提醒
Loading加载
Alert警告提示
Tour新手引导

导航组件 ​

组件说明
Menu导航菜单
Tabs标签页
Segmented分段控制器
Breadcrumb面包屑
Dropdown下拉菜单
Pagination分页
Anchor锚点
Backtop返回顶部
Affix固钉
FloatButton悬浮按钮

基础设施 ​

组件说明
ConfigProvider全局配置组件

使用下方搜索框和分类标签,快速找到你需要的组件。

基于 MIT 许可发布