uni-halo/.agents/skills/uniapp-project/examples/uni-ui/README.md

uni-ui 组件示例文件

本目录包含所有 uni-ui 组件的完整示例代码，每个组件都有独立的示例文件。

文件命名规范

示例文件命名格式：{组件名}.vue

例如：

• uni-badge.vue - uni-badge 数字角标组件示例
• uni-icons.vue - uni-icons 图标组件示例
• uni-card.vue - uni-card 卡片组件示例

示例文件结构

每个示例文件包含：

1. 文件头部注释：包含组件名称、官方文档地址、插件市场地址
2. 完整示例代码：包含官网展示的所有示例场景
3. 模板代码：完整的 template 部分
4. 脚本代码：完整的 script 部分，包含数据和方法
5. 样式代码：完整的 style 部分

组件列表

基础组件

• uni-badge.vue - 数字角标
• uni-icons.vue - 图标
• uni-tag.vue - 标签
• uni-link.vue - 超链接

布局组件

• uni-row.vue - 布局-行
• uni-grid.vue - 宫格
• uni-group.vue - 分组
• uni-section.vue - 标题栏
• uni-title.vue - 章节标题

导航组件

• uni-nav-bar.vue - 自定义导航栏
• uni-breadcrumb.vue - 面包屑

数据展示组件

• uni-card.vue - 卡片
• uni-list.vue - 列表
• uni-indexed-list.vue - 索引列表
• uni-table.vue - 表格
• uni-load-more.vue - 加载更多
• uni-pagination.vue - 分页器

数据录入组件

• uni-easyinput.vue - 增强输入框
• uni-number-box.vue - 数字输入框
• uni-forms.vue - 表单
• uni-data-checkbox.vue - 数据选择器
• uni-data-picker.vue - 级联选择器
• uni-data-select.vue - 下拉框
• uni-combox.vue - 组合框

日期时间组件

• uni-calendar.vue - 日历
• uni-datetime-picker.vue - 日期选择器
• uni-dateformat.vue - 日期格式化

反馈组件

• uni-popup.vue - 弹出层
• uni-drawer.vue - 抽屉
• uni-notice-bar.vue - 通告栏
• uni-tooltip.vue - 文字提示

操作反馈组件

• uni-rate.vue - 评分
• uni-fav.vue - 收藏按钮
• uni-fab.vue - 悬浮按钮
• uni-swipe-action.vue - 滑动操作

其他组件

• uni-collapse.vue - 折叠面板
• uni-countdown.vue - 倒计时
• uni-search-bar.vue - 搜索栏
• uni-segmented-control.vue - 分段器
• uni-steps.vue - 步骤条
• uni-swiper-dot.vue - 轮播图指示点
• uni-transition.vue - 过渡动画
• uni-file-picker.vue - 文件选择上传
• uni-goods-nav.vue - 商品导航

使用说明

1. 每个示例文件都是完整的、可运行的 Vue 组件
2. 示例代码来自 uni-ui 官方文档
3. 所有示例都包含完整的 template、script 和 style
4. 示例文件可以直接复制到项目中使用

参考资源

• uni-ui 官方文档
• uni-ui 插件市场