UG666

UG666 UI

Vue 组件总览

每个组件页都包含导入方式、实际预览、代码示例与 Props 说明,便于直接迁移到业务项目中。

UButton 按钮

查看文档 →

用于触发主要操作、次级操作与危险操作的 Vue 按钮组件。

操作反馈表单

UInput 输入框

查看文档 →

带标签、错误信息与帮助文本的文本输入框。

表单数据录入

ULabel 标签

查看文档 →

语义化表单标签,支持必填星号与 for 关联。

表单可访问性

UCard 卡片

查看文档 →

用于承载模块内容、摘要信息与操作区域的卡片容器。

布局展示

UBadge 徽标

查看文档 →

用于状态标记、分类标签与数量提示的轻量徽标。

状态标记

UModal 对话框

查看文档 →

居中对话框组件,支持遮罩关闭、ESC 关闭与自定义页脚。

反馈浮层

UTable 表格

查看文档 →

组合式数据表格组件,适合后台列表与信息对比。

数据展示布局

UToaster 通知

查看文档 →

轻量通知系统,适合全局成功、错误与提示反馈。

反馈通知

UTabs 标签页

查看文档 →

受控式标签页组件,适合分组内容切换。

导航布局

UDropdown 下拉菜单

查看文档 →

点击触发的下拉操作菜单,支持危险项与对齐方式。

导航操作

UAvatar 头像

查看文档 →

头像组件,支持图片回退、尺寸变化与首字母占位。

展示用户

UTooltip 提示

查看文档 →

悬停提示组件,支持四个方向的内容展示。

反馈提示

UAlert 提示

查看文档 →

强调型提示横幅,适合信息提醒、警告与错误反馈。

反馈状态

UBreadcrumb 面包屑

查看文档 →

面包屑导航组件,用于表达页面层级关系。

导航层级

USwitch 开关

查看文档 →

二元状态切换组件,支持标签位置与禁用态。

表单状态切换

UTextarea 文本域

查看文档 →

多行文本输入组件,支持错误与帮助说明。

表单数据录入

USkeleton 骨架屏

查看文档 →

骨架屏占位组件,适合加载阶段的结构预览。

反馈加载

UProgress 进度条

查看文档 →

线性进度条组件,支持颜色与百分比标签。

反馈状态

USheet 抽屉

查看文档 →

侧边抽屉组件,适合筛选面板与补充上下文内容。

浮层布局

UEmptyState 空状态

查看文档 →

空状态占位组件,支持图标、描述与行动按钮。

反馈空数据

USpinner 加载

查看文档 →

旋转加载指示器,适合局部加载与异步请求等待。

加载反馈

UPagination 分页

查看文档 →

分页导航组件,支持省略号与页码跳转。

导航数据列表

USelect 选择器

查看文档 →

原生 select 封装,支持占位、错误和帮助文本。

表单选择

USidebar 侧边栏

查看文档 →

后台侧边导航组件,支持折叠态与底部插槽。

导航布局

UCheckbox 复选框

查看文档 →

用于多项选择的复选框组件,支持 v-model 受控、indeterminate 半选状态与三种尺寸。

表单数据录入

URadio 单选框

查看文档 →

URadio 与 URadioGroup 配合使用,管理一组互斥选项,支持垂直/水平排列、禁用与三种尺寸。

表单数据录入

USeparator 分割线

查看文档 →

轻量分隔线组件,支持水平与垂直方向,常用于卡片内容分区和按钮组之间的视觉间隔。

布局展示

USlider 数值滑块

查看文档 →

数值滑块组件,支持 v-model、min/max/step 连续数值调节与当前值显示,适合音量、亮度等场景。

表单数据录入

UNumberInput 数字步进输入框

查看文档 →

带 +/- 步进按钮的数字输入框,支持 v-model、min/max/step/precision 与三种尺寸。

表单数据录入

UOTPInput 验证码输入

查看文档 →

逐位验证码输入框,支持键盘方向键导航、Backspace 回退与粘贴自动填充。

表单数据录入

UDescriptions 详情列表

查看文档 →

以 key-value 对形式展示结构化信息,支持无边框网格与有边框表格两种布局,适合用户详情、订单信息与配置预览等场景。

数据展示详情

UStatistic 数据统计卡

查看文档 →

用于展示核心业务指标,支持前缀 slot、后缀文案、趋势箭头与变化说明,适合数据看板与分析页面。

数据展示统计

UTag 标签

查看文档 →

可交互的内联标签组件,支持多种语义变体、可关闭操作与自定义颜色,区别于纯展示用途的 UBadge。

数据展示标记

UAvatarGroup 头像堆叠组

查看文档 →

将多个头像以堆叠方式展示,超出 max 数量时末尾显示 +N 圆形气泡,适合团队成员、协作者列表等场景。

数据展示用户

USteps 步骤条

查看文档 →

步骤条组件,展示多步骤流程进度,支持水平与垂直方向,已完成步骤显示勾选标记。

导航流程

UNavigationMenu 顶部导航

查看文档 →

顶部横向导航菜单,支持直接链接与 hover 展开的下拉子菜单,当前激活项自动高亮。

导航布局

UContextMenu 右键菜单

查看文档 →

右键菜单组件,监听 contextmenu 事件,在鼠标位置展开浮层,点击外部或 ESC 关闭。

导航操作