当前位置:   article > 正文

ColorUI使用与技巧

colorui


1 ColorUI学习

简介:ColorUI 鲜亮的高饱和色彩,专注视觉的小程序组件库
感谢:作者 文晓港

1.1 准备

引入资源 demo中的colorui – app.wxss

@import '/colorui/icon.wxss';
@import '/colorui/main.wxss';
  • 1
  • 2

1.2 自定义导航栏

1️⃣app.json 配置取消系统导航栏,并全局引入组件

  "window": {
  "navigationBarBackgroundColor": "#39b54a",
  "navigationBarTitleText": "Color UI",
  "navigationStyle": "custom", //1 取消
  "navigationBarTextStyle": "white"
 },
  
  "usingComponents": { //2 引入
    "cu-custom":"/colorui/components/cu-custom"
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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;
        }
      }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

3️⃣page wxml页面可以直接调用了

<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
	<view slot="backText">返回</view>
	<view slot="content">导航栏</view>
</cu-custom>
  • 1
  • 2
  • 3
  • 4

参数

cu-custom 参数作用类型默认
bgColor背景颜色类名String空值 ‘’
isCustom是否开启左侧 (箭头+房子图标)Booleanfalse
isBack是否开启左侧(箭头+backText)Booleanfalse
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;
❤固定布局-size (5种)
xssmdflgxl
20%40%50%60%80%
加小小号默认大号加小
extrasmalldefaultsmallextra
❤比例布局-num (3种)
subtwicetreble
123
❤垂直对齐-v (5种)
startendcenterstretchbaseline
上对齐下对齐中间对齐两端对齐第1行文字对齐
flex-startflex-endflex-centerstretchbaseline
❤水平对齐-h (5种)
startendcenterbetweenaround
左对齐右对齐居中左右间隔相等项目两侧的间隔相等
flex-startflex-endcenterspace-betweenspace-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;
❤辅助布局-size (6种)
0xssm默认lgxl
010rpx20rpx30rpx40rpx50rpx

❤辅助布局-position (6种)
toprightbottomleftlrtb
left-righttop-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 背景图片加一层黑色遮罩下面开始

<view class="bg-img" 
style="background-image: url('图片路径;height: 414rpx;"></view>
  • 1
  • 2

写内置样式配合用
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 (8种)
size 参数大小尺寸说明
xs20rpx说明文本,标签文字等关注度低的文字
sm24rpx页面辅助信息,次级内容等
df28rpx页面默认字号,用于摘要或阅读文本
lg32rpx页面小标题,首要层级显示内容
xl36rpx页面大标题,用于结果页等单一信息页
xxl44rpx用于金额数字等信息
sl80rpx用于图标、数字等较大显示
xsl120rpx用于图标、数字等特大显示

❤颜色Color (15种)
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

❤对齐Align (3种)
对齐说明
left
center
right

❤固定Fixed (2+5种)
固定说明代码
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} 直接设置图标

    默认图标

    名称 10context
    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

<view class="cu-bar">   必须的
	<view>1</view>
	<view>2</view>
</view>
  • 1
  • 2
  • 3
  • 4

效果是 左右 靠边对齐 相当(flex align-center justify-between)
在这里插入图片描述
如果里面有4个
在这里插入图片描述

2️⃣内部修饰action

<view class="cu-bar">   必须的
    <view class="action">1</view>
    <view class="action">2</view>
</view>
  • 1
  • 2
  • 3
  • 4

效果:目前看到效果,左右对齐有间隔
在这里插入图片描述

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/869021
推荐阅读
  

闽ICP备14008679号