# 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-badge.vue) - 数字角标
- [uni-icons.vue](./uni-icons.vue) - 图标
- [uni-tag.vue](./uni-tag.vue) - 标签
- [uni-link.vue](./uni-link.vue) - 超链接

### 布局组件
- [uni-row.vue](./uni-row.vue) - 布局-行
- [uni-grid.vue](./uni-grid.vue) - 宫格
- [uni-group.vue](./uni-group.vue) - 分组
- [uni-section.vue](./uni-section.vue) - 标题栏
- [uni-title.vue](./uni-title.vue) - 章节标题

### 导航组件
- [uni-nav-bar.vue](./uni-nav-bar.vue) - 自定义导航栏
- [uni-breadcrumb.vue](./uni-breadcrumb.vue) - 面包屑

### 数据展示组件
- [uni-card.vue](./uni-card.vue) - 卡片
- [uni-list.vue](./uni-list.vue) - 列表
- [uni-indexed-list.vue](./uni-indexed-list.vue) - 索引列表
- [uni-table.vue](./uni-table.vue) - 表格
- [uni-load-more.vue](./uni-load-more.vue) - 加载更多
- [uni-pagination.vue](./uni-pagination.vue) - 分页器

### 数据录入组件
- [uni-easyinput.vue](./uni-easyinput.vue) - 增强输入框
- [uni-number-box.vue](./uni-number-box.vue) - 数字输入框
- [uni-forms.vue](./uni-forms.vue) - 表单
- [uni-data-checkbox.vue](./uni-data-checkbox.vue) - 数据选择器
- [uni-data-picker.vue](./uni-data-picker.vue) - 级联选择器
- [uni-data-select.vue](./uni-data-select.vue) - 下拉框
- [uni-combox.vue](./uni-combox.vue) - 组合框

### 日期时间组件
- [uni-calendar.vue](./uni-calendar.vue) - 日历
- [uni-datetime-picker.vue](./uni-datetime-picker.vue) - 日期选择器
- [uni-dateformat.vue](./uni-dateformat.vue) - 日期格式化

### 反馈组件
- [uni-popup.vue](./uni-popup.vue) - 弹出层
- [uni-drawer.vue](./uni-drawer.vue) - 抽屉
- [uni-notice-bar.vue](./uni-notice-bar.vue) - 通告栏
- [uni-tooltip.vue](./uni-tooltip.vue) - 文字提示

### 操作反馈组件
- [uni-rate.vue](./uni-rate.vue) - 评分
- [uni-fav.vue](./uni-fav.vue) - 收藏按钮
- [uni-fab.vue](./uni-fab.vue) - 悬浮按钮
- [uni-swipe-action.vue](./uni-swipe-action.vue) - 滑动操作

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

## 使用说明

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

## 参考资源

- [uni-ui 官方文档](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
- [uni-ui 插件市场](https://ext.dcloud.net.cn/plugin?id=55)