【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教程