ColorUI使用与技巧
文章目录
- 1 ColorUI学习
-
- 1.1 准备
- 1.2 自定义导航栏
-
- 1️⃣app.json 配置取消系统导航栏，并全局引入组件
- 2️⃣app.js 获得系统信息
- 3️⃣page wxml页面可以直接调用了
- 2 基础元素basic
-
- 2.1 布局 Layout
-
- 1️⃣Flex布局
- 2️⃣Grid布局
- 3️⃣辅助布局
- 2.2 背景Background
- 2.3 文字 Text
- 2.4 图标icon
- 2.5 按钮Button
- 2.6 标签 Tag
- 2.7 头像 Avatar
- 2.8 进度条 Progress
- 2.9 边框阴影 Border&Shadow
- 2.10 加载 Loading
- 3 组件 Componet
-
- 3.1 操作条Tab
-
- 1️⃣基本用法cu-bar
- 2️⃣内部修饰action
- 3️⃣操作条 tabbar
- 3.2 导航栏 nav
- 3.3 列表List
- 3.4 卡片Card
- 3.5 表单Form
- 3.6 时间轴TimeLine
- 3.7 聊天 chat
- 3.8 轮播
- 3.9 静态框 modal
- 3.10 步骤条
1 ColorUI学习
简介：ColorUI 鲜亮的高饱和色彩，专注视觉的小程序组件库
感谢：作者 文晓港
1.1 准备
引入资源 demo中的colorui – app.wxss
@import '/colorui/icon.wxss';
@import '/colorui/main.wxss';
1.2 自定义导航栏
1️⃣app.json 配置取消系统导航栏，并全局引入组件
"window": {
"navigationBarBackgroundColor": "#39b54a",
"navigationBarTitleText": "Color UI",
"navigationStyle": "custom", //1 取消
"navigationBarTextStyle": "white"
},
"usingComponents": { //2 引入
"cu-custom":"/colorui/components/cu-custom"
},
2️⃣app.js 获得系统信息
wx.getSystemInfo({
success: e => {
this.globalData.StatusBar = e.statusBarHeight;
let capsule = wx.getMenuButtonBoundingClientRect();
if (capsule) {
this.globalData.Custom = capsule;
this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
} else {
this.globalData.CustomBar = e.statusBarHeight + 50;
}
}
})
3️⃣page wxml页面可以直接调用了
返回
导航栏
参数
| cu-custom 参数 | 作用 | 类型 | 默认 |
|---|---|---|---|
| bgColor | 背景颜色类名 | String | 空值 ‘’ |
| isCustom | 是否开启左侧 （箭头+房子图标） | Boolean | false |
| isBack | 是否开启左侧（箭头+backText） | Boolean | false |
| bgImage | 背景图片路径 | String | 空值 ‘’ |
| slot块 | 作用 |
|---|---|
| backText | 在isBack为true，显示最左侧（一般是返回） |
| content | 中间区域文字（一般是标题） |
| right | 右侧区域文字 （一般是小提示）(icon图标) |
注意 ：
isCustom 页面跳转是： /pages/index/index
isBack 页面跳转是：上一页
2 基础元素basic
2.1 布局 Layout
1️⃣Flex布局
| class名 | 内容 | 举例css内容 |
|---|---|---|
| flex | 弹性布局（必选） | display:flex; |
| basis-{size} | 固定布局 | flex-basis:20%; |
| flex-{num} | 比例布局 | flex:1; |
| flex-direction | 按列排列 | flex-direction:column; |
| flex-wrap | 一行排不下，换行 | flex-wrap:wrap; |
| align-{vl} | 垂直对齐(items) | align-items:flex-start; |
| self-{v} | 元素内的某个项(self) | align-self:flex-start; |
| justify-{hl} | 水平对齐 | justify-content:flex-start; |
| xs | sm | df | lg | xl |
|---|---|---|---|---|
| 20% | 40% | 50% | 60% | 80% |
| 加小 | 小号 | 默认 | 大号 | 加小 |
| extra | small | default | small | extra |
| sub | twice | treble |
|---|---|---|
| 1 | 2 | 3 |
| start | end | center | stretch | baseline |
|---|---|---|---|---|
| 上对齐 | 下对齐 | 中间对齐 | 两端对齐 | 第1行文字对齐 |
| flex-start | flex-end | flex-center | stretch | baseline |
| start | end | center | between | around |
|---|---|---|---|---|
| 左对齐 | 右对齐 | 居中 | 左右间隔相等 | 项目两侧的间隔相等 |
| flex-start | flex-end | center | space-between | space-around |
2️⃣Grid布局
| class名 | 内容 | 举例css内容 |
|---|---|---|
| grid | 栅格布局（必须） | display:flex;flex-wrap:wrap; |
| col-{num} | 等列 | 参数：1，2，3，4，5 |
| grid-square | 等高 |
3️⃣辅助布局
| class名 | 作用 | 举例css内容 |
|---|---|---|
| margin-{size} | 外边距 | margin:10rpx; |
| magin-{position}-{size} | 外边距-具体一边 | margin-top:10rpx; |
| padding-{size} | 内边距 | padding:10rpx; |
| fl | 左浮动 | float:left; |
| fr | 右浮动 | float:right; |
| 0 | xs | sm | 默认 | lg | xl |
|---|---|---|---|---|---|
| 0 | 10rpx | 20rpx | 30rpx | 40rpx | 50rpx |
| top | right | bottom | left | lr | tb |
|---|---|---|---|---|---|
| 上 | 右 | 下 | 左 | left-right | top-bottom |
2.2 背景Background
- 深色背景 bg-{color} 15个
- 浅色背景 再加个 light
- 渐变背景 bg-gradual-{color} 6个
red/orange/green/blue/purple/pink - 图片背景
bg-img 把背景图片放大到适合元素容器的尺寸，图片比例不变。注意，超出容器的部分可能会裁掉。
bg-mask 背景图片加一层黑色遮罩
bg-shadeTop 背景图片加一层黑色遮罩上面开始
bg-shadeBottom 背景图片加一层黑色遮罩下面开始
写内置样式配合用
background-image
height
一个加了 遮罩，一个没有
总结：
| Class名 | 作用 | 举例CSS |
|---|---|---|
| bg-{color} | 深色背景 | background-color:red;color:darkColor; |
| line-{color} | 细边框颜色 | ::after伪元素 border-color:red; |
| lines-{color} | 粗边框颜色 | ::after伪元素 border-color:red; |
2.3 文字 Text
| 文本 | 作用 | Class内容 |
|---|---|---|
| text-{size} | 文字大小 | font-size: 20rpx; |
| text-{color} | 文字颜色 | color: red; |
| text-{align} | 字体对齐 | text-align: center; |
| text-{Fixed} | 固定参数 | text-transform: Capitalize; |
| size 参数 | 大小尺寸 | 说明 |
|---|---|---|
| xs | 20rpx | 说明文本，标签文字等关注度低的文字 |
| sm | 24rpx | 页面辅助信息，次级内容等 |
| df | 28rpx | 页面默认字号，用于摘要或阅读文本 |
| lg | 32rpx | 页面小标题，首要层级显示内容 |
| xl | 36rpx | 页面大标题，用于结果页等单一信息页 |
| xxl | 44rpx | 用于金额数字等信息 |
| sl | 80rpx | 用于图标、数字等较大显示 |
| xsl | 120rpx | 用于图标、数字等特大显示 |
| color | 颜色 | 内容 |
|---|---|---|
| red | 嫣红 #e54d42 | ❤red |
| orange | 桔橙 #f37b1d | ❤orange |
| yellow | 明黄 #fbbd08 | ❤yellow |
| olive | 橄榄 #8dc63f | ❤olive |
| green | 森绿 #39b54a | ❤green |
| cyan | 天青 #1cbbb4 | ❤cyan |
| blue | 海蓝 #0081ff | ❤blue |
| purple | 姹紫 #6739b6 | ❤purple |
| mauve | 木槿 #9c26b0 | ❤mauve |
| pink | 桃粉 #e03997 | ❤pink |
| brown | 棕褐 #a5673f | ❤brown |
| grey | 玄灰 #8799a3 | ❤grey |
| gray | 草灰 #aaaaaa | ❤gray |
| black | 墨黑 #333333 | ❤back |
| white | 雅白 #ffffff | ❤white |
| 对齐 | 说明 |
|---|---|
| left | 左 |
| center | 中 |
| right | 右 |
| 固定 | 说明 | 代码 |
|---|---|---|
| shadow | 文字阴影 | text-shadow:3px 3px 4px rgba(204,69,59,0.2) |
| bold | 文字加粗 | text-weight:100 |
| Abc | 首字母大写 | text-transform: Capitalize; |
| ABC | 全字母大写 | text-transform: Uppercase; |
| abc | 全字母小写 | text-transform: Lowercase; |
| price | 人民币 ￥ | content: “¥”;font-size: 80%;margin-right: 4rpx; |
| cut | 溢出部分，显示… | text-overflow: ellipsis;white-space: nowrap;overflow: hidden; |
总结: 按 参数形式 我们分为2种，一种是多个参数（大小，颜色，对齐），一种是固定参数（阴影，加粗，大小写等）
2.4 图标icon
-
culcon-{iconName} 直接设置图标
默认图标
名称 10 context female \e71a male \e71c check \e645 close \e646 loading \e7f1 right \e6a3 radioboxfill \e763 roundclosefill \e658 emoji \e64a icloading \e67a 
这个是 main.wxss 不可删除的
图标分为 内置和外置 （都来自 阿里巴巴 iconfont）
2.5 按钮Button
- 按钮必选 cu-btn
- 默认 cu-btn，round为圆角，cuIcon为圆形包裹图标
- 尺寸 默认， sm 小尺寸， lg大尺寸
- 颜色 bg-{{colorName}}
- 阴影 shadow
- 镂空 line-{{color}} 或 lines-{{colors}} 粗边框
- 块状 lg
- 禁用 disable
- 加图标 cuIcon-{{iconName}} 包裹在 button内
button 记得去掉 “style”: “v2”,
2.6 标签 Tag
- 标签必选 cu-tag
- 默认 cu-tag，round为圆角，radius为圆角
- 尺寸 sm 小尺寸
- 颜色 bg-{{colorName}}
- 阴影 shadow
- 镂空 line-{{color}} 或 lines-{{colors}} 粗边框
- 胶囊 cu-capsule 用包裹
- 数字 badge
2.7 头像 Avatar
- 头像必选 cu-avatar
- 形状 round 圆形 radius方形
- 尺寸 sm 默认 lg xl 4种
- 内嵌文字(图标) 用包裹
- 颜色 bg-{colorName}
- 组 cu-avatar 添加 cu-avatar-group
- 标签 内 加 cu-tag
2.8 进度条 Progress
- 进度条必选 cu-progress
- 形状 默认方形 rauius 为圆角 round圆形 loading 初始是false,页面需要赋值为true
- 尺寸 默认 sm xs
- 颜色 bg-{{colorName}}
- 条纹 striped active 动态效果
- 比例 在cu-progress内 : style=“width:50%”
- 布局 包含内设置
2.9 边框阴影 Border&Shadow
| class | 说明 |
|---|---|
| .solid | 四周-细边框 |
| .solid-{direction} | 具体某个方向-细边框 |
| .solids | 四周-粗边框 |
| .solids-{direction} | 具体某个方向-粗边框 |
| .shadow | 根据背景颜色而改变的阴影 |
| .shadow .shadow-lg | 长阴影 |
| .shadow-warp | 翘边阴影 |
| .shadow-blur | 根据背景图而改变的阴影 |
direction 参数是 top -right -bottom -left
2.10 加载 Loading
- 加载必选 cu-load
- 状态 loading正在加载中，over加载完成，erro加载失败
- 背景 bg-{{colorName}}
- 弹框加载 load-modal
- 进度条加载 load-progress
- 进度条样式 load-progress-bar
- 旋转加载样式 load-progress-spinner
- 隐藏 hide
- 显示 show
3 组件 Componet
3.1 操作条Tab
- 操作条必选 cu-bar
- 操作条必选 tabbar
- 固定在页面底部 foot
- 小程序tabbar的minButton
- 购物操作条必选值 shop
- 提交按钮 submin
- 带下边框样式的标题 border-title
- css属性align-self:flex-end self-end
- 搜索框 search-form
- 输入框样式 input
1️⃣基本用法cu-bar
必须的
1
2
效果是 左右 靠边对齐 相当（flex align-center justify-between）
如果里面有4个
2️⃣内部修饰action
必须的
1
2
效果：目前看到效果，左右对齐有间隔
3️⃣操作条 tabbar
3.2 导航栏 nav
- 导航栏 nav
- 导航栏子元素 cu-item
- flex布局 flex
- 平分 flex-sub
- 居中 text-center
3.3 列表List
- 列表必选值 cu-list
- 列表子元素 cu-item
- 无边框 no-border
- 菜单列表 menu
- 短边框 sm-border
- 卡片样式的菜单列表 card-menu
- 右箭头 arrow
- 消息列表(带头像) cu-avatar
- 内容 content
- 灰度 grayscale
- cur
- 左移 move-cur
3.4 卡片Card
- 卡片必选值 cu-card
- 案例类卡片 case
- 动态类卡片 dynamic
- 文章类卡片 article
- 评论 comment
- 配合cu-card，去除子元素cu-item的margin和border no-card
- 纵向的flex布局 desc
3.5 表单Form
- 表单子元素 cu-form-group
- 标题 title
3.6 时间轴TimeLine
- cu-timeLine 包裹 cu-time和cu-item
- cu-item 包裹 content 内容
3.7 聊天 chat
- 聊天必选值 cu-chat
- 子元素 cu-item
- 右侧本人的聊天样式 self
- 聊天内容 main
- 消息内容 content
- 消息日期 date
- 提示词 cu-info
3.8 轮播
- 全屏限高轮播 screen-swiper
- 方形指示点 square-dot
- 圆形指示点 round-dot
- 卡片式轮播 card-swiper
- 滑动切换区域 swiper-item
- 堆叠式轮播 tower-swiper
- 堆叠式轮播子元素 tower-item
3.9 静态框 modal
基本
- 模态框必选 cu-modal
- 显示弹框 show
- 子元素 cu-dialog
样式
- 底部弹框 bottom-modal
- 侧边弹框 drawer-modal
说一说Modal细节
modal默认是全部居中，可在cu-diolog 后面加个内置样式 text-align:left
如：< view class=“cu-dialog” style=“text-align: left;”>
3.10 步骤条
- 步骤条必选 cu-steps
- 子元素 cu-item
- 数字步骤条未完成图标 num
- 错误图标 err
- 步骤条连接箭头 steps-arrow
- 配合多级步骤使用 steps-bottom