molong/colorui-doc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mjz update

Browse Source
This commit is contained in:
mjz
2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
docs/10.文档/10.快速开始/10.介绍.md Normal file
View File

@@ -0,0 +1,28 @@
---
title: 介绍
date: 2023-05-28 09:51:38
permalink: /pages/base
article: false
---
::: tip 温馨提示
本文档并非是官方文档，而是本人自己经常使用 Color UI，但是又找不到一个满意的文档，不如自己搭建一个文档，自己使用方便的同时也方便大家使用
:::
## 基本介绍
Color UI 我想大家都知晓吧，我就不过多阐述了，是 **文晓港** 大佬开发的一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的 Css 组件库.，属于出道即巅峰的史诗级大作，众所周知，万物皆可 Color UI，很多人用 Color UI 做了不少精美的项目，我也一样，在此再次感谢作者。
[ColorUI Github地址](https://github.com/weilanwl/ColorUI)
[ColorUI 插件市场](https://ext.dcloud.net.cn/plugin?id=239)
## 文档说明
文档左侧目录，基础元素、交互组件、插件扩展分别对应，Color UI 底部对应的三个大模块，而三个模块下二级目录，也分别对应三个页面里的模块，点击目录右侧会跳转到对应的页面。
每一个页面，会分别将对应的代码块展示出来，部分对应的页面最下方点击**点此查看页面原代码**即可查看对应页面的完整代码。
### 视图/目录 切换
点击h5预览模板左上角的切换视图，可以切换目录/视图

179
docs/10.文档/10.快速开始/20.快速使用.md Normal file
View File

@@ -0,0 +1,179 @@
---
title: 快速使用
date: 2023-05-28 10:28:38
permalink: /pages/baseStart
article: false
---
## 素材
ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！ [语雀-ColorUI群资源](https://www.yuque.com/colorui)
## 前言
ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。
## 交流
微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。QQ群：240787041 或扫描二维码。
[![img](https://camo.githubusercontent.com/f686814edb071f1cce9f0401a5fd487c4f64b5aa8e981f080b04f255e21199c9/68747470733a2f2f636f732e636f6c6f722d75692e636f6d2f7765622f6b6d346a732e706e67)](https://camo.githubusercontent.com/f686814edb071f1cce9f0401a5fd487c4f64b5aa8e981f080b04f255e21199c9/68747470733a2f2f636f732e636f6c6f722d75692e636f6d2f7765622f6b6d346a732e706e67)
## 使用UniApp开发
### 开始
下载源码解压获得`/Colorui-UniApp`文件夹，复制目录下的 `/colorui` 文件夹到你的项目根目录
```vue
App.vue` 引入关键Css `main.css` `icon.css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>
```
### 使用自定义导航栏
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
`App.vue` 获得系统信息
```js
onLaunch: function() {
uni.getSystemInfo({
success: function(e) {
// #ifndef MP
Vue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == 'android') {
Vue.prototype.CustomBar = e.statusBarHeight + 50;
} else {
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif
// #ifdef MP-WEIXIN
Vue.prototype.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif
}
})
},
```
`pages.json` 配置取消系统导航栏
```js
"globalStyle": {
"navigationStyle": "custom"
},
```
复制代码结构可以直接使用，注意全局变量的获取。
使用封装,在`main.js` 引入 `cu-custom` 组件。
```js
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
```
`page.vue` 页面可以直接调用了
```vue
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
```
| 参数 | 作用 | 类型 | 默认值 |
| ------- | ------------ | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |
## 使用原生小程序开发
### 从现有项目开始
下载源码解压获得`/demo`，复制目录下的 `/colorui` 文件夹到你的项目根目录
```
App.wxss` 引入关键Css `main.wxss` `icon.wxss
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```
### 从新项目开始
下载源码解压获得`/template`，复制`/template`并重命名为你的项目，导入到小程序开发工具既可以开始你的新项目了
### 使用自定义导航栏
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。
`App.js` 获得系统信息
```
onLaunch: function() {
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let custom = wx.getMenuButtonBoundingClientRect();
this.globalData.Custom = custom;
this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
}
})
},
```
`App.json` 配置取消系统导航栏,并全局引入组件
```
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"cu-custom":"/colorui/components/cu-custom"
}
```
`page.wxml` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">导航栏</view>
</cu-custom>
```
| 参数 | 作用 | 类型 | 默认值 |
| -------- | ---------------- | ------- | ------ |
| bgColor | 背景颜色类名 | String | '' |
| isBack | 是否开启返回 | Boolean | false |
| isCustom | 是否开启左侧胶囊 | Boolean | false |
| bgImage | 背景图片路径 | String | '' |
| slot块 | 作用 |
| -------- | ---------------------------------- |
| backText | 返回时的文字 |
| content | 中间区域 |
| right | 右侧区域(小程序端可使用范围很窄！) |

193
docs/10.文档/20.基础元素/10.布局.md Normal file
View File

@@ -0,0 +1,193 @@
---
title: 布局
date: 2023-05-28 10:34:38
permalink: /pages/basics/layout
article: false
---
## Flex布局
父级容器的 `class` 需要加入 `flex`
### 固定尺寸
> css
```css
.basis-xs 所占比例 20%
.basis-sm 所占比例 40%
.basis-sub 所占比例 50%
.basis-lg 所占比例 60%
.basis-xl 所占比例 80%
```
> 演示代码
```vue
<view class="flex flex-wrap">
<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
<view class="basis-df"></view>
<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
<view class="basis-df"></view>
<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
</view>
```
### 比例布局
> css
```css
.flex-sub 所占比例 1
.flex-twice 所占比例 2
.flex-treble 所占比例 3
```
> 演示代码
```vue
<!-- 1:1 -->
<view class="flex">
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
</view>
<!-- 1:2 -->
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
</view>
<!-- 1:2:3 -->
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
</view>
```
### 水平对齐
父容器的 class 中加入 `justify-start|end|center|between|around`
> css
```css
.justify-start 对齐方式 从行首开始排列
.justify-end 对齐方式 从行尾开始排列
.justify-center 对齐方式 居中排列
.justify-between 对齐方式 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
.justify-around 对齐方式 均匀排列每个元素，每个元素之间的间隔相等
```
> 演示代码
```vue
<view class="flex solid-bottom padding justify-start">
<view class="bg-grey padding-sm margin-xs radius">start</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding justify-end">
<view class="bg-grey padding-sm margin-xs radius">end</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding justify-center">
<view class="bg-grey padding-sm margin-xs radius">center</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
<view class="flex solid-bottom padding justify-between">
<view class="bg-grey padding-sm margin-xs radius">between</view>
<view class="bg-grey padding-sm margin-xs radius">between</view>
</view>
<view class="flex solid-bottom padding justify-around">
<view class="bg-grey padding-sm margin-xs radius">around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
</view>
```
### 垂直对齐
父容器的 class 中加入 `align-start|end|center`
> css
```css
.align-start 对齐方式 元素位于容器的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
.align-end 对齐方式 元素位于容器的结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
.align-center 对齐方式 元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
```
> 演示代码
```vue
<view class="flex solid-bottom padding align-start">
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding align-end">
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding align-center">
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
```
## Grid布局
### 等分列
class 加入 `grid col-1|2|3|...`
> 演示代码
```vue
<view class="grid margin-bottom text-center" v-for="(item,index) in 5" :key="index" :class="'col-' + (index+1)">
<view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'" v-for="(item,indexs) in (index+1)*2" :key="indexs">{{indexs+1}}</view>
</view>
```
### 等高
在 class 中加入 `grid col-4|5|... grid-square`
```vue
<view class="grid col-4 grid-square">
<view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
</view>
<script>
export default {
data() {
return {
avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg','https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'],
};
},
}
</script>
```
## 辅助布局
### 浮动
在 class 加入 `fl|fr`，在父容器 class 加入 `cf`
> 演示代码
```vue
<view class="cf padding-sm">
<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
</view>
```
### 内外边距
`size=xs|sm|默认|lg|xl`，属性后面没有跟上 size 就是默认
| 属性 | 值 |
| ---- | :--- |
| xs | `10upx` |
| sm | `20upx` |
| 默认 | `30upx` |
| lg | `40upx` |
| xl | `50upx` |
| 内容 | css 属性 |
| ---- | :--- |
| 外边距 | `margin-{size}` |
| 内边距　 | `padding-{size}` |
| 水平方向外边距 | `margin-lr-{size}` |
| 水平方向内边距 | `padding-lr-{size}` |
| 垂直方向外边距 | `margin-tb-{size}` |
| 垂直方向内边距 | `padding-tb-{size}` |
| 上外边距 | `margin-top-{size}` |
| 上内边距 | `padding-top-{size}` |
| 右外边距 | `margin-right-{size}` |
| 右内边距 | `padding-right-{size}` |
| 下外边距 | `margin-bottom-{size}` |
| 下内边距 | `padding-bottom-{size}` |
| 左外边距 | `margin-left-{size}` |
| 左内边距 | `padding-left-{size}` |

102
docs/10.文档/20.基础元素/20.背景.md Normal file
View File

@@ -0,0 +1,102 @@
---
title: 背景
date: 2023-05-28 10:55:38
permalink: /pages/basics/background
article: false
---
## 深色背景
在 class 中加入 `bg-Red|Orange|...`
```css
.bg-red /* 嫣红 #e54d42 */
.bg-orange /* 桔橙 #f37b1d */
.bg-yellow /* 明黄 #fbbd08 */
.bg-olive /* 橄榄 #8dc63f */
.bg-green /* 森绿 #39b54a */
.bg-cyan /* 天青 #1cbbb4 */
.bg-blue /* 海蓝 #0081ff */
.bg-purple /* 姹紫 #6739b6 */
.bg-mauve /* 木槿 #9c26b0 */
.bg-pink /* 桃粉 #e03997 */
.bg-brown /* 棕褐 #a5673f */
.bg-grey /* 玄灰 #8799a3 */
.bg-gray /* 草灰 #aaaaaa */
.bg-black /* 墨黑 #333333 */
.bg-white /* 雅白 #ffffff */
```
## 浅色背景
在 class 中加入 `bg-Red|Orange|...`
在 class 中再加入 `light`
```css
.light .bg-red /* 嫣红 #e54d42 */
.light .bg-orange /* 桔橙 #f37b1d */
.light .bg-yellow /* 明黄 #fbbd08 */
.light .bg-olive /* 橄榄 #8dc63f */
.light .bg-green /* 森绿 #39b54a */
.light .bg-cyan /* 天青 #1cbbb4 */
.light .bg-blue /* 海蓝 #0081ff */
.light .bg-purple /* 姹紫 #6739b6 */
.light .bg-mauve /* 木槿 #9c26b0 */
.light .bg-pink /* 桃粉 #e03997 */
.light .bg-brown /* 棕褐 #a5673f */
.light .bg-grey /* 玄灰 #8799a3 */
```
## 渐变背景
在 class 中加入 `bg-gradual-red|orange|...`
```css
.bg-gradual-red /* 魅红 #f43f3b - #ec008c */
.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */
.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */
.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */
.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */
.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */
```
## 图片背景
在 class 中加入 `bg-img bg-mask`
> css 代码
```css
.bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
.bg-mask 在背景图片加一层黑色遮罩
.bg-shadeTop 背景图片加一层黑色遮罩上面开始
.bg-shadeBottom 背景图片加一层黑色遮罩下面开始
```
> 演示代码
```vue
<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
<view class="padding-xl text-white">
<view class="padding-xs text-xxl text-bold">
钢铁之翼
</view>
<view class="padding-xs text-lg">
Only the guilty need fear me.
</view>
</view>
</view>
```
## 透明背景（文字层）
在 class 中加入 `bg-shadeBottom|shadeTop`
> 演示代码
```vue
<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
<view class="bg-shadeTop padding padding-bottom-xl">
上面开始
</view>
</view>
<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
<view class="bg-shadeBottom padding padding-top-xl flex-sub">
下面开始
</view>
</view>
```

120
docs/10.文档/20.基础元素/30.文本.md Normal file
View File

@@ -0,0 +1,120 @@
---
title: 文本
date: 2023-05-28 14:05:38
permalink: /pages/basics/text
article: false
---
## 文字大小
```css
.text-xsl 文字大小 60px 用于图标、数字等特大显示
.text-sl 文字大小 40px 用于图标、数字等较大显示
.text-xxl 文字大小 22px 用于金额数字等信息
.text-xl 文字大小 18px 页面大标题，用于结果页等单一信息页
.text-lg 文字大小 16px 页面小标题，首要层级显示内容
.text-df 文字大小 14px 页面默认字号，用于摘要或阅读文本
.text-sm 文字大小 12px 页面辅助信息，次级内容等
.text-xs 文字大小 10px 说明文本，标签文字等关注度低的文字
```
## 文字颜色
```css
.text-red /* 嫣红 #e54d42 */
.text-orange /* 桔橙 #f37b1d */
.text-yellow /* 明黄 #fbbd08 */
.text-olive /* 橄榄 #8dc63f */
.text-green /* 森绿 #39b54a */
.text-cyan /* 天青 #1cbbb4 */
.text-blue /* 海蓝 #0081ff */
.text-purple /* 姹紫 #6739b6 */
.text-mauve /* 木槿 #9c26b0 */
.text-pink /* 桃粉 #e03997 */
.text-brown /* 棕褐 #a5673f */
.text-grey /* 玄灰 #8799a3 */
.text-gray /* 草灰 #aaaaaa */
.text-black /* 墨黑 #333333 */
.text-white /* 雅白 #ffffff */
```
## 文字阴影
```css
.text-shadow {
/* h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊的距离 color 阴影的颜色; */
text-shadow: 3px 3px 4px rgba(204, 69, 59, 0.2);
}
```
## 文字截断
> css 代码
```css
.text-cut 定义文字容器宽度，超出截断
```
> 演示代码
```vue
<template>
<view class="padding bg-white">
<view class="text-cut padding bg-grey radius" style="width:220px">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
</template>
```
## 文字对齐
> css 代码
```css
.text-left 左对齐
.text-center 居中对齐
.text-right 右对齐
```
> 演示代码
```vue
<template>
<view class="padding bg-white">
<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>
</template>
```
## 特殊文字
> css 代码
```css
.text-price 价格文本，利用伪元素添加"¥"符号
.text-Abc 英文单词首字母大写
.text-ABC 全部字母大写
.text-abc 全部字母小写
```
> 演示代码
```vue
<template>
<view class="padding text-center">
<view class="padding-lr bg-white">
<view class="solid-bottom padding">
<text class="text-price">80.00</text>
</view>
<view class="padding">价格文本，利用伪元素添加"¥"符号</view>
</view>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-Abc">color Ui</text>
</view>
<view class="padding">英文单词首字母大写</view>
</view>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-ABC">color Ui</text>
</view>
<view class="padding">全部字母大写</view>
</view>
<view class="padding-lr bg-white margin-top">
<view class="solid-bottom padding">
<text class="text-abc">color Ui</text>
</view>
<view class="padding">全部字母小写</view>
</view>
</view>
</template>
```

29
docs/10.文档/20.基础元素/40.图标.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: 图标
date: 2023-05-28 15:16:38
permalink: /pages/basics/icon
article: false
---
::: tip 温馨提示
点击右侧图标页面，对应的图标，即可复制类名：`cuIcon-图标名称`
:::
## 引入样式
编辑 `App.vue`文件在`<style>` 项引入 `icon.css`
```vue
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
</style>
```
## 使用语法
```html
<标签 class="cuIcon-图标名称"></标签>
```

100
docs/10.文档/20.基础元素/50.按钮.md Normal file
View File

@@ -0,0 +1,100 @@
---
title: 按钮
date: 2023-05-28 15:20:38
permalink: /pages/basics/button
article: false
---
## 按钮形状
> css 代码
```css
.cu-btn 默认　　
.cu-btn round 圆角
.cu-btn cuIcon 图标按钮
```
> 演示代码
```vue
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<!-- 图标按钮 -->
<button class="cu-btn cuIcon">
<text class="cuIcon-emojifill"></text>
</button>
```
## 按钮尺寸
> css 代码
```css
.cu-btn sm 小尺寸
.cu-btn 默认
.cu-btn lg 大尺寸
```
> 演示代码
```vue
<button class="cu-btn round sm">小尺寸</button>
<button class="cu-btn round">默认</button>
<button class="cu-btn round lg">大尺寸</button>
```
## 按钮颜色
> css 代码
```css
.bg-red 背景颜色 | .bg-...
.shadow 阴影
```
> 演示代码
```vue
<button class="cu-btn round bg-red shadow">按钮</button>
```
## 镂空按钮
`.bg-` 换成 `.line-`
```css
.lines-red|... 边框深（大）
.line-red|... 边框浅（小）
```
## 块状按钮
> css 代码
```css
.cu-btn lg
```
> 演示代码
```vue
<button class="cu-btn bg-grey lg">玄灰</button>
<button class="cu-btn bg-red margin-tb-sm lg">嫣红</button>
```
## 无效状态
加上 `disabled` 属性即可
> 演示代码
```vue
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>
<button class="cu-btn block line-blue margin-tb-sm lg" disabled>无效状态</button>
```
## 按钮加图标
`button` 标签里加入**图标+文字**即可，需要加载状态，加上属性 `loading`
> 演示代码
```vue
<button class="cu-btn block line-orange lg">
<text class="cuIcon-upload"></text> 图标
</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="cuIcon-loading2 cuIconfont-spin"></text> 加载
</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading>
原生加载
</button>
```

14
docs/10.文档/20.基础元素/60.标签.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 标签
date: 2023-05-28 15:20:38
permalink: /pages/basics/tag
article: false
---
## 标签
::: details 点此查看页面源代码
页面位置：`/pages/basics/tag`
```vue
```
:::

14
docs/10.文档/20.基础元素/70.头像.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 头像
date: 2023-05-28 16:15:38
permalink: /pages/basics/avatar
article: false
---
## 头像
::: details 点此查看页面源代码
页面位置：`/pages/basics/avatar`
```vue
```
:::

14
docs/10.文档/20.基础元素/80.进度条.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 进度条
date: 2023-05-28 16:16:38
permalink: /pages/basics/progress
article: false
---
## 进度条
::: details 点此查看页面源代码
页面位置：`/pages/basics/progress`
```vue
```
:::

14
docs/10.文档/20.基础元素/90.边框阴影.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 边框阴影
date: 2023-05-28 15:20:38
permalink: /pages/basics/shadow
article: false
---
## 边框阴影
::: details 点此查看页面源代码
页面位置：`/pages/basics/shadow`
```vue
```
:::

14
docs/10.文档/20.基础元素/91.加载.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 加载
date: 2023-05-28 15:20:38
permalink: /pages/basics/loading
article: false
---
## 加载
::: details 点此查看页面源代码
页面位置：`/pages/basics/loading`
```vue
```
:::

14
docs/10.文档/30.交互组件/10.操作条.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 操作条
date: 2023-05-28 16:17:38
permalink: /pages/component/bar
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/bar`
```vue
```
:::

14
docs/10.文档/30.交互组件/20.导航栏.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 导航栏
date: 2023-05-28 16:17:38
permalink: /pages/component/nav
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/nav`
```vue
```
:::

14
docs/10.文档/30.交互组件/30.列表.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 列表
date: 2023-05-28 16:17:38
permalink: /pages/component/list
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/list`
```vue
```
:::

14
docs/10.文档/30.交互组件/40.卡片.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 卡片
date: 2023-05-28 16:17:38
permalink: /pages/component/card
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/card`
```vue
```
:::

14
docs/10.文档/30.交互组件/50.表单.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 表单
date: 2023-05-28 16:17:38
permalink: /pages/component/form
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/form`
```vue
```
:::

14
docs/10.文档/30.交互组件/60.时间轴.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 时间轴
date: 2023-05-28 16:17:38
permalink: /pages/component/timeline
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/timeline`
```vue
```
:::

14
docs/10.文档/30.交互组件/70.聊天.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 聊天
date: 2023-05-28 16:17:38
permalink: /pages/component/chat
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/chat`
```vue
```
:::

14
docs/10.文档/30.交互组件/80.轮播.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 轮播
date: 2023-05-28 16:17:38
permalink: /pages/component/swiper
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/swiper`
```vue
```
:::

14
docs/10.文档/30.交互组件/90.模态框.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 模态框
date: 2023-05-28 16:17:38
permalink: /pages/component/modal
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/modal`
```vue
```
:::

14
docs/10.文档/30.交互组件/91.步骤条.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 步骤条
date: 2023-05-28 16:17:38
permalink: /pages/component/steps
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/component/steps`
```vue
```
:::

14
docs/10.文档/40.插件扩展/10.索引列表.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 索引动画
date: 2023-05-28 16:17:38
permalink: /pages/plugin/indexes
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/plugin/indexes`
```vue
```
:::

14
docs/10.文档/40.插件扩展/20.微动画.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 微动画
date: 2023-05-28 16:17:38
permalink: /pages/plugin/animation
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/plugin/animation`
```vue
```
:::

14
docs/10.文档/40.插件扩展/30.全屏抽屉.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 全屏抽屉
date: 2023-05-28 16:17:38
permalink: /pages/plugin/drawer
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/plugin/drawer`
```vue
```
:::

14
docs/10.文档/40.插件扩展/40.垂直导航.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: 垂直导航
date: 2023-05-28 16:17:38
permalink: /pages/plugin/verticalnav
article: false
---
## 操作条
::: details 点此查看页面源代码
页面位置：`/pages/plugin/verticalnav`
```vue
```
:::