【CMUI专栏】cyan及列表组件彻底上手指南----大幅提高你的开发速度

时间  2019-11-30
标签 CMUI专栏 cyan 列表 组件 彻底 上手 指南 大幅 提高 开发 速度 栏目 快乐工作 繁體版
原文   原文链接

发放内容

以前已经发过关于CMUI的介绍，还不了解的小伙伴能够点击这里。今天要为你们放出的是CMUI中部分功能的使用包以及上手指南。须要上手体验的请移步文章底部。因为涉及内容较多，我尽可能用最简短的语言来向你描述使用方法，最好的方式仍是你直接上手尝试。javascript

本次放出的内容包括：css

cyan：CMUI样式库Cyan的完整版html

component：CMUI组件库中和布局相关的list组件（基于Vue）vue

styleInit：CMUI方法库中的动态样式java

特色和区别

针对人群：CMUI的开发主要针对的人群是配有设计师，可是没有本身的设计标准或者没有和设计标准匹配的UI框架的公司或团队。gulp

和UI库的区别：大部分UI库提供开箱即用的UI设计，一般适用于我的项目或中台系统，CMUI使用描述型样式来匹配设计稿，同时提供主题库进行开箱即用。bootstrap

和描述型库的区别：常见的描述型库如Tailwind，bulma等都是对css的彻底抽取，几乎就是使用class重写一遍CSS，不管从代码量，记忆量和上手难度都很高。Cyan尽可能使用减法对CSS进行抽取，你用过一次就知道它有多简单，你甚至不须要看文档。api

安装和引入

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

子节点控制

  1. 子节点位置：为子节点添加top/left/right/bottom/center进行精确控制

  2. 子节点比例：为子节点添加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>
复制代码

提示：

  1. 须要对默认圆角尺寸进行修改能够修改$border-radius-base 变量，这会影响全部的默认圆角
  2. 须要对默认边框颜色进行修改能够修改$border-color-default变量，这会影响全部的默认边框
  3. 移动端显示边框为.5像素，这是大部分设计稿须要的，如需1像素的边框请使用边框类
  4. 你能够在list-item中继续嵌套list实现更加复杂的结构
  5. 每行第一个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>
复制代码

输出

使用提示：

  1. 你能够在cmui-list-item中继续嵌套cmui-list，来完成各类复杂的嵌套布局
  2. 你能够在cmui-list-item中嵌套ratio-container，这种结构很是适合建立广告位展现
  3. 只有在你须要非平均分配列，修改边框颜色，以及设置间距的时候须要使用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自动生成并插入动态样式表，因此直接使用就行了。

结构：

  1. 属性名写全称，如padding margin top...
  2. 方向名写简称，如t表示top，b表示bottom，r表示right，l表示left，h表示水平（即左右），v表示垂直（即上下）
  3. 紧跟数字，数字对应的值为750设计稿上的值，好比在设计稿上看到填充为10，就直接写成padding10
  4. 若是须要负值，能够在数字前加-n，好比margint-n14在375输出下等效于margin-top:-7px
  5. 采用750的对应设计是为了符合主流设计稿尺寸，因为转换为375输出尺寸会减半，所以建议使用偶数。
<div class="paddingt24 marginv22 paddingh34 top4 right-n12"></div>
复制代码

为何不支持width和height？

在实际开发中width和height会同时使用px或rem，这是设计和交互决定的，咱们没法判断你的实际需求。

上面介绍的内容已经彻底能够解决你布局的需求，下面咱们将介绍和内容排版有关的用法

色彩

默认色彩

_variables中的$colorList定义了7种颜色，这些色彩会同时被继承到按钮，文本，背景，表单，徽标等元素。建议你删除全部的色彩，并根据设计须要从新定义颜色。

色彩定义方法

  1. 直接使用颜色名进行定义，如red,blue等，这样会大幅减小你的思考时间，方便你HTML的编写，所见即所写
  2. 添加一个表示主色的命名，如main，primary，这样有助于你的项目总体换色时大幅度减少你的工做量。
  3. 名称中不要出现空格或特殊字符，若是须要可使用连字符或下划线，如red-light
  4. 不要定义灰色系色彩，也不要使用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，你能够随意定义名称和尺寸，内部的转换关系已经帮你写好了，你只须要根据设计要求设置三个值，高度，左右的填充，字体大小。在设置的过程当中请注意如下几点

  1. 尽可能使用表示大小的名词，不要使用表示业务逻辑的词语，这有助于你从此HTML的编写
  2. base项能够修改，可是不能删除
  3. 不建议使用和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>
复制代码

徽标在本质上和按钮是彻底相同的，所以全部按钮的使用方法均可以在徽标中使用。

它和按钮的区别以下

  1. 一般状况下徽标的尺寸要比按钮小
  2. 一般用于没有点击事件的元素上，如展现优惠券，促销信息等
  3. 支持更多的辅助class
  4. 能够直接嵌套在按钮当中

辅助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中设置的全部色彩你均可以应用到表单上，你能够有两种形式来使用

  1. 若是但愿表单全部元素都使用相同的颜色，能够直接将对应的名字添加到和.form相同的节点上。
  2. 若是你只须要改动某个表单元素的颜色，能够直接将对应的名字添加到该元素上。
统一设置：全部的表单元素都将变为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动态样式。

猛击这里破解二维码，获取安装包

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程