mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
99 lines
3.6 KiB
Markdown
99 lines
3.6 KiB
Markdown
# 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)
|