发放内容
之前已经发过关于CMUI的介绍，还不了解的小伙伴可以点击这里。今天要为大家放出的是CMUI中部分功能的使用包以及上手指南。需要上手体验的请移步文章底部。由于涉及内容较多，我尽量用最简短的语言来向你描述使用方法，最好的方式还是你直接上手尝试。
本次放出的内容包括：
cyan：CMUI样式库Cyan的完整版
component：CMUI组件库中和布局相关的list组件（基于Vue）
styleInit：CMUI方法库中的动态样式
特点和区别
针对人群：CMUI的开发主要针对的人群是配有设计师，但是没有自己的设计标准或者没有和设计标准匹配的UI框架的公司或团队。
和UI库的区别：大部分UI库提供开箱即用的UI设计，通常适用于个人项目或中台系统，CMUI使用描述型样式来匹配设计稿，同时提供主题库进行开箱即用。
和描述型库的区别：常见的描述型库如Tailwind，bulma等都是对css的完全抽取，几乎就是使用class重写一遍CSS，无论从代码量，记忆量和上手难度都很高。Cyan尽量使用减法对CSS进行抽取，你用过一次就知道它有多简单，你甚至不需要看文档。
安装和引入
cmui依赖Vue并且采用rem布局，同时需要动态样式的支持，因此你需要在使用前进行初始化。
浏览器使用
Cyan采用SASS编写，你可以使用你喜欢的编译工具对其进行编译，建议使用koala或gulp，配合autoprefixer编译为CSS并插入你的HTML中。
<link rel="stylesheet" type="text/css" href="CMUI/style/cmuiMobile.css">
<script charset="utf-8" src="vue.js"></script><!--组件依赖VUE-->
<script charset="utf-8" src="lodash.js"></script><!--组件依赖lodash-->
<script charset="utf-8" src="CMUI/lib/index.umd.min.js"></script><!--加载组件库-->
<script charset="utf-8" src="CMUI/lib/styleInit.umd.min.js"></script><!--加载动态初始化文件-->
<script charset="utf-8">
styleInit()//初始化rem并添加动态样式支持
</script>
项目引入
你也可以在你的项目里引入源文件。
import vue from 'vue'
import _ from 'lodash'
import 'CMUI/cyan/cmuiMobile.scss'
import styleInit from 'CMUI/es/styleInit.es.js'
import cmui from 'CMUI/es/index.es.js'
vue.use(cmui)
styleInit()
Cyan
cyan封装了6种常见布局，几乎可以满足所有的布局要求。
网格布局
使用方式和bootstrap完全相同，12列用span，15列用col
.container>.row>.span3*4
.container>.row>.col3*5
网格间距默认响应式20px，如需修改请修改_variables.scss中的$container_padding
盒布局
和网格布局完全相同，网格间无间距
.box-container>.box-row>.box-span3*4
.box-container>.box-row>.box-col3*5
比例容器
<div class="ratio-container">
<div>这个DIV以1：1展示</div>
</div>
<div class="ratio-container" ratio="2/3">
<div>这个DIV以2：3展示</div>
</div>
制作图片提示
<div class="ratio-container">
<img src="">
<div class="mask top-a padding20 text-white">这是一段文字</div>
</div>
<div class="ratio-container">
<img src="">
<div class="mask top-a padding20 mask-white">这是一段文字</div>
</div>
图片容器
<div class="img-container">
<img src="" alt="">
</div>
辅助class
| 拉伸 | 填充 | 边框 | 圆角 | 位置 |
|---|---|---|---|---|
| full | flex-x/flex-y | border | round/radius | top/left/bottom/right |
直接将class到img-container后面即可，值得注意的是这些class可以随意组合甚至全部组合到一起。
<!--让图片在容器的左上角显示-->
<div class="img-container top left">
<img src="" alt="">
</div>
<!--制作一个直径为50px的圆形容器并放置图片，可用于制作头像-->
<!--使用img-container并手动设置行内的width是一个常见的操作-->
<div class="img-container round" style="width:50px">
<img src="" alt="">
</div>
弹性容器
<div class="flex-container">
这里填写内部结构，横向排列
</div>
<div class="flex-container-col">
这里填写内部结构，纵向排列
</div>
默认的布局为between结构可选around，但你几乎不会用到。
辅助class
| 间隔类型选择 | 顺序翻转 | 位置控制 | 子节点横纵向填满 |
|---|---|---|---|
| round/between | reverse | top/left/right/bottom/center | vfull/hfull |
子节点控制
-
子节点位置：为子节点添加top/left/right/bottom/center进行精确控制
-
子节点比例：为子节点添加flex1~flex5，来控制它占据剩余空间的比例
滚动容器
横向滚动
<div class="scroll-container"></div>
纵向滚动，通常需要设置高度
<div class="scroll-container"></div>
demo：
<div class="scroll-container">
<div style="width:100px;" v-for="item in imgUrls">
<div class="img-container">
<img :src="item" alt="">
</div>
</div>
</div>
列表
cyan列表：纯样式
列表样式可创建等分的行列结构，通常用于制作底部导航，图标导航，广告位，商品列表等
<div class="list">
<div class="list-item"></div>
<div class="list-item"></div>
...
</div>
辅助class
| 控制列数 | 控制边框 | 位置控制 |
|---|---|---|
| list-col{num} num的范围为1～6 | border | radius |
创建三列 带有边框 外层边框圆角的列表
<div class="list list-col3 border radius">
<div class="list-item"></div>
<div class="list-item"></div>
...
</div>
提示：
- 需要对默认圆角尺寸进行修改可以修改$border-radius-base 变量，这会影响所有的默认圆角
- 需要对默认边框颜色进行修改可以修改$border-color-default变量，这会影响所有的默认边框
- 移动端显示边框为.5像素，这是大部分设计稿需要的，如需1像素的边框请使用边框类
- 你可以在list-item中继续嵌套list实现更加复杂的结构
- 每行第一个list-item会进行浮动的清除，不用担心高度不同引起的窜位问题
组件列表：Vue组件
列表组件支持无限嵌套，自定义分组，自定义间距和自定义色彩边框色彩
props:
| 属性名称 | 类型 | 默认值 | 用途 | 说明 |
|---|---|---|---|---|
| col | Number | [Nmuber] | 1 | 设置列数 | 列数，如果是数字表示平分为N列，如果是数组，数组长度表示列数，数组中的数字表示每列所占比例 |
| space | Number | 0 | 设置间距 | 每列之间的间距，对应750设计稿中的值 |
| border | Boolean | String | false | 设置边框 | 如果是Boolean类型表示是否使用默认值设置边框，如果是String类型，表示边框的颜色值 |
输入
<template>
<cmui-list :col="col" :space="space" :border="border">
<cmui-list-item v-for="i in 8">
<cmui-list :col="3" :border="true">
<cmui-list-item v-for="i in 3">{{i}}</cmui-list-item>
</cmui-list>
</cmui-list-item>
</cmui-list>
</template>
<script>
export default {
data() {
return {
col:[2,3,4,5],//设置为4列，比例为2：3：4：5
space:22,//间距为22，对应到375的显示上为11px
border:'#e2b453'//设置边框颜色为#e2b453
}
}
}
</script>
输出
使用提示：
- 你可以在cmui-list-item中继续嵌套cmui-list，来完成各种复杂的嵌套布局
- 你可以在cmui-list-item中嵌套ratio-container，这种结构非常适合创建广告位展示
- 只有在你需要非平均分配列，修改边框颜色，以及设置间距的时候需要使用list组件，普通情况下使用list已经可以满足大部分要求
虚拟列表：Vue组件
需要在列表内展示大量数据可以使用虚拟列表，仅渲染在可视区内的数据
<template>
<cmui-virtual-list height="500px" :listData="data" v-slot="xxx">
<div class="borderb padding10">
{{xxx.item.value}}
</div>
</cmui-virtual-list>
</template>
<script>
export default {
data() {
return {
data:Array.from({length:10000}).map(faker.lorem.sentences)
}
}
}
</script>
输出
props
| 属性名 | 类型 | 默认值 | Description |
|---|---|---|---|
| listData | Array | [] | 列表所需要的数据 |
| bufferScale | Number | 1 | 在可见区域之外的上/下方预渲染比例，避免快速滑动时出现闪烁 |
| estimatedItemSize | Number | 150 | 列表项的预估高度，用于预先计算可视区域的显示项数 |
| height | String | 100% | 包裹元素的高度。 |
布局辅助
float
| 类名 | 作用 |
|---|---|
| float-right | 向右浮动 |
| float-left | 向左浮动 |
| clearfix | 清除浮动 |
position
| 类名 | 作用 |
|---|---|
| pos-r | 设置position为relative |
| pos-a | 设置position为absolute |
| pos-f | 设置position为fixed |
| pos-s | 设置position为sticky |
position辅助
| 类名 | 作用 |
|---|---|
| vcenter | 绝对定位，水平居中 |
| hcenter | 绝对定位，垂直居中 |
| fullcenter | 绝对定位，完全居中 |
| abs-{position} | 在某个方向上绝对定位，你可以使用top,right,bottom,left,full,center六个值当中的任意一个代替position |
| fixed-{position} | 在某个方向上固定定位，你可以使用top,right,bottom,left,full,center六个值当中的任意一个代替position |
<!--使用vcenter hcenter fullcenter abs-{position}需要为外层容器增加pos-r-->
<div class="pos-r">
<div class="vcenter"></div>
<div class="abs-bottom"></div>
</div>
<!--使用fixed-{position}可以直接使用-->
<div class="fixed-bottom"></div>
overflow
| 类名 | 作用 |
|---|---|
| overflow-h | 溢出隐藏 |
| overflow-xh | 水平方向上溢出隐藏 |
| overflow-yh | 垂直方向上溢出隐藏 |
| overflow-i | 溢出初始化 有些时候你需要关闭overflow:hidden的时候可以用到这个class |
<body class="overflow-xh">body不会出现横向滚动条</body>
display
| 类名 | 作用 |
|---|---|
| dis-b | display:block |
| dis-i | display:inline |
| dis-n | display:none |
| dis-t | display:table |
| dis-it | display:inline-table |
<div class="dis-n"></div>
动态样式
对于padding margin top bottom left right这些样式我们采用了动态样式，会根据你class自动生成并插入动态样式表，所以直接使用就好了。
结构：
- 属性名写全称，如padding margin top...
- 方向名写简称，如t表示top，b表示bottom，r表示right，l表示left，h表示水平（即左右），v表示垂直（即上下）
- 紧跟数字，数字对应的值为750设计稿上的值，比如在设计稿上看到填充为10，就直接写成padding10
- 如果需要负值，可以在数字前加-n，比如margint-n14在375输出下等效于margin-top:-7px
- 采用750的对应设计是为了符合主流设计稿尺寸，由于转换为375输出尺寸会减半，因此建议使用偶数。
<div class="paddingt24 marginv22 paddingh34 top4 right-n12"></div>
为什么不支持width和height？
在实际开发中width和height会同时使用px或rem，这是设计和交互决定的，我们无法判断你的实际需求。
上面介绍的内容已经完全可以解决你布局的需求，下面我们将介绍和内容排版有关的用法
色彩
默认色彩
_variables中的$colorList定义了7种颜色，这些色彩会同时被继承到按钮，文本，背景，表单，徽标等元素。建议你删除所有的色彩，并根据设计需要重新定义颜色。
色彩定义方法
- 直接使用颜色名进行定义，如red,blue等，这样会大幅减少你的思考时间，方便你HTML的编写，所见即所写
- 添加一个表示主色的命名，如main，primary，这样有助于你的项目整体换色时大幅度减小你的工作量。
- 名称中不要出现空格或特殊字符，如果需要可以使用连字符或下划线，如red-light
- 不要定义灰色系色彩，也不要使用gray dark等表示灰色的名词，以防止混乱，灰色系请在$grayList中定义
对文件尺寸的影响
色彩系统会继承到按钮，表单，文本等多项元素并再次进行翻转和深浅的拓展，因此每增加一种颜色都会增加大约1k的CSS（gzip后）,我们会在后面的版本的动态样式中加入对动态色彩的支持。
色彩应用
你可以直接将你定义的色彩名称应用到背景，按钮，徽标，文本，表单。
对于按钮，徽标，表单，你可以直接应用到对应元素上
<div class="btn red">按钮</div>
<div class="badge red">徽标</div>
<input type="checkbox" class="red">
对于文本和背景需要设置前置名称
<p class="bg-blue text-red">红色的文本，蓝色背景</p>
排版
色彩
使用text-{color}的组合来设置文本的颜色，颜色的可取值为_variables中colorList和grayList的值。
<p class="text-red">红色的文本</p>
<p class="text-dark">深色的文本</p>
尺寸
使用fs-{size}或frs-{size}设置文字大小，文本的默认字号是14px
fs-{size}：size的范围为10-20；对应表示了已PX为单位的对应字体大小。
frs-{size}：size的范围为20-40之间的偶数；表示了已rem为单位的对应字体大小。
在实际的交互中缩放的字体大小会极大的影响美感，因此我们的建议是尽量使用fs-{size}来保持字体的尺寸，除非你有特殊的需要可以使用frs-{size}。
下面两行文本在375的设备上显示效果完全相同，但是在其他尺寸设备下，frs-30对应的文字会进行缩放
<p class="fs-15">15px的固定大小文字</p>
<p class="frs-30">15px的响应式文字</p>
排列
| 类名 | 作用 |
|---|---|
| text-left | 文本居左排列 |
| text-right | 文本居右排列 |
| text-center | 文本居中排列 |
| text-justify | 文本两端对齐，仅最后一行有效，但是通常用于仅有一行的文本 |
| text-nowrap | 强制禁止文本换行，会对flex布局造成影响 |
| text-indent | 段落预留两个字符的空白 |
转换
| 类名 | 作用 |
|---|---|
| text-lowercase | 将文本转换为小写 |
| text-uppercase | 将文本转换为大写 |
| text-capitalize | 将文本转换为驼峰形式 |
类型
| 类名 | 作用 |
|---|---|
| text-bolder | 文本加粗 |
| text-delete | 文本划线删除 |
| text-vcenter | 文本垂直居中 |
| text-vtop | 在一行文本大小不一的时候，文本垂直居顶部 |
| text-vbottom | 在一行文本大小不一的时候，文本垂直居底部 |
提示： 对于排列在一行但是字体大小不一的文本，如果你需要使用text-vtop,text-vcenter,text-vbottom来对齐他们在上中下的位置，你需要为外层容器添加text-container
行数限制与固定
| 类名 | 作用 |
|---|---|
| text-limit{num} | 无论文本长度如何，限制文本不能超过num行，超出的部分用...显示 |
| text-fixed{num} | 无论文本长度如何，固定文本为num行，即使文本长度不足，依旧占用高度 |
行高设置
默认行高为1，可以为节点添加lh-{num}类来设置行高,num的取值范围是12~60之间4的倍数
<span class="lh-40">设置行高为40PX</span>
按钮
<span class="btn">button</span>
辅助class
| 类名 | 作用 |
|---|---|
| {color} | 继承于色彩系统中的$colorList，默认可选值为red orange yellow green coffee blue purple |
| {size} | 继承于尺寸系统，可以不写，默认可选值为small big |
| radius | 为按钮增加圆角 |
| reverse | 对按钮进行翻转 |
| light | 进行浅色处理 |
| block | 转换为block结构，从而使按钮充满所在容器，常用于登陆等位置 |
尺寸调整
修改_variables.scss中的$btn-size-list，你可以随意定义名称和尺寸，内部的转换关系已经帮你写好了，你只需要根据设计要求设置三个值，高度，左右的填充，字体大小。在设置的过程中请注意以下几点
- 尽量使用表示大小的名词，不要使用表示业务逻辑的词语，这有助于你今后HTML的编写
- base项可以修改，但是不能删除
- 不建议使用和colorList中重名的命名，否则将产生双重继承，除非你有类似的需要，如同时将色彩和尺寸命名为coupon，来表示一个优惠券按钮。
demo
<div class="btn">默认</div>
<div class="btn blue">蓝色</div>
<div class="btn blue reverse">翻转</div>
<div class="btn blue reverse radius">圆角</div>
<div class="btn blue light">变淡</div>
<div class="btn blue small">small</div>
<div class="btn blue radius">
<i class="baseIcon baseIcon-add"></i>嵌套图标
</div>
<div class="btn blue radius">
<span class="badge red round">2</span>嵌套徽标
</div>
输出
按钮组
将按钮放置在.btn-group中可以形成按钮组，从而轻易制作出分页样式
<div class="btn-group">
<div class="btn green radius reverse" v-for="i in 10">{{i}}</div>
</div>
徽标
<span class="badge">button</span>
徽标在本质上和按钮是完全相同的，因此所有按钮的使用方法都可以在徽标中使用。
它和按钮的区别如下
- 通常情况下徽标的尺寸要比按钮小
- 通常用于没有点击事件的元素上，如展示优惠券，促销信息等
- 支持更多的辅助class
- 可以直接嵌套在按钮当中
辅助class
| 类名 | 作用 |
|---|---|
| pill | 药片形状的标签 |
| round | 圆形标签 |
| square | 正方形形状的标签 |
| flag | 旗帜形状的标签，通常和绝对定位（pos-a）组合使用 |
尺寸调整
修改_variables.scss中的$badge-size-list，具体内容参考按钮的尺寸调整，可以使用和btn相同的名称，但如果值也相同那么最终它们将以相同的形式出现
demo
这里仅展示不同于btn的使用方法。其他方法可见btn案例
<div class="badge">默认</div>
<div class="badge green pill">药片</div>
<div class="badge green round">1</div>
<div class="badge green square">券</div>
<div class="badge green reverse round">1</div>
<div class="badge green reverse square">券</div>
<div class="badge green flag">券</div>
输出
表单
我们保留的系统默认样式，如果需要用Cyan的样式，将表单元素包裹在.form中即可
<div class="form">
<input type="text">
</div>
辅助class 1
以下辅助class用于非radio和CheckBox的元素
| 类名 | 作用 |
|---|---|
| focus | 获取焦点样式，可手动添加class触发，也可以通过点击的方式触发 |
| radius | 增加圆角 |
| disabled | 禁用 |
| reverse | 翻转样式 |
| transparent | 透明样式 |
<div class="form">
<input type="text" class="radius">
<select name="" id="" class="radius"></select>
</div>
辅助class 2
以下class用于radio和CheckBox
| 类名 | 作用 |
|---|---|
| disabled | 禁用 |
| reverse | 翻转样式 |
| square | 正方形样式 |
| right | 对号样式：仅用于radio |
| switch | 滑动开关样式：仅用于CheckBox |
<div class="form">
<p>checkbox 样式</p>
<input type="checkbox" label="未选中">
<input type="checkbox" checked label="默认选中">
<input type="checkbox" class="reverse" checked label="reverse选中">
<input type="checkbox" class="square" checked label="square选中">
<input type="checkbox" class="square reverse" checked label="square reverse 选中">
<p>switch 样式</p>
<input type="checkbox" class="switch" checked label="square reverse 选中">
<p>radio样式</p>
<input type="radio" label="未选中">
<input type="radio" checked label="默认选中">
<input type="radio" class="reverse" checked label="reverse选中">
<input type="radio" class="square" checked label="square选中">
<input type="radio" class="square reverse" checked label="square reverse 选中">
<input type="radio" class="right" checked label="right选中">
<input type="radio" class="right reverse" checked label="right reverse 选中">
</div>
按钮属性
CheckBox以及radio继承了按钮的样式，按钮的全部辅助class都可以组合使用，这对于实现分类选择的功能非常适用。
<div class="form">
<input type="checkbox" class="btn radius" label="未选中">
<input type="checkbox" class="btn radius" checked label="默认选中">
<input type="checkbox" class="btn radius light" checked label="light选中">
<input type="checkbox" class="btn radius reverse" checked label="reverse选中">
<input type="checkbox" class="btn radius square reverse" checked label="square reverse 选中">
<input type="radio" class="btn radius reverse" checked label="radio reverse 选中">
</div>
label标签对齐
为表单元素添加文本可以使用label标签，如果同级使用它们会以底部对齐，如果希望居中对齐，可以将表单元素包裹在label标签内部，对于CheckBox和radio，更好的办法是直接调用label属性。
同级使用，底部对齐
<input type="checkbox"/><label for="">label</label>
嵌套使用，居中对齐
<label for=""><input type="checkbox"/>label</label>
属性调用，居中对齐
<input type="checkbox" label="label"/>
尺寸
为了表单和按钮同时使用的美观和编码统一，表单元素的尺寸继承于按钮，因此每当你修改$btn-size-list，表单的尺寸也会同步修改，于此同时你也可以直接在表单元素上调用你设置的尺寸名称。
<div class="form flex-container">
<input type="text" class="big"/>
<span class="btn big">submit</span>
</div>
色彩
默认色：_variables中的$form-color-base表示表单的默认色，在不添加额外颜色的时候所有表单元素在激活状态下均使用这个颜色。
色彩库：表单元素继承于色彩系统，因此在$colorList中设置的所有色彩你都可以应用到表单上，你可以有两种形式来使用
- 如果希望表单所有元素都使用相同的颜色，可以直接将对应的名字添加到和.form相同的节点上。
- 如果你只需要改动某个表单元素的颜色，可以直接将对应的名字添加到该元素上。
统一设置：所有的表单元素都将变为red对应的颜色
<div class="form red">
...表单元素
</div>
单独设置：text设置为blue对应的颜色，CheckBox设置为green对应的颜色
<div class="form">
<input type="text" class="blue"/>
<input type="checkbox" class="green"/>
</div>
自定义颜色
对于偶尔使用的表单颜色，无需在色彩库中添加，为元素添加custom可以直接使用自定义颜色
<div class="form" style="color:#ab36cc">
使用本身的颜色#23546a
<input type="text" class="custom" style="color:#23546a"/>
从父容器继承，使用#ab36cc
<input type="text" class="custom"/>
<input type="text" class="custom"/>
</div>
上手体验
以上为大家介绍了CMUI的部分功能，但这只是全部框架的冰山一角，由于Demo和文档的美化工作以及部分收尾工作还在进行中，因此目前只能向大家提供本文所介绍的功能的安装包。但是你完全可以应用到你的项目里，解决你的布局和UI问题，如果你是在使用VUE那么你可以使用本文介绍的所有功能，如果你是使用其他框架，那么你可以直接使用cyan样式库和styleInit动态样式。
