color ui
color ui——組件使用
組件類型
-
ColorUI
-
Vant webapp
ColorUI
????????下載地址??Git地址?官網地址
簡介
ColorUI是一個css庫！！！在你引入樣式后可以根據class來調用組件，一些含有交互的操作我也有簡單寫，可以為你開發提供一些思路。
可控性很強，如果不滿意，可以按照自己的需求更改。該組件庫本身就是一個小程序，我們在Github上下載源碼之后，直接用微信開發者工具打開即可也可以使用HBuilderX運行微信開發者工具上進行瀏覽。?
文件目錄介紹?
1.Jeecg-boot目錄結構
?2..hbuilderx存放的是hbuilderx生成的文件目錄
3.api存放的是接口地址?
4.common文件目錄
?5.components組件列表 存放一些組件以及組件的CSS樣式和一些js方法
6.pages頁面組件目錄? 每一個功能對應一個頁面
7.plugin存放的colorui的一些公用組件以及css樣式
?8.static存放靜態資源的目錄 （圖片）
9.store存放vue來進行數據的統一管理
10.hbuilderx運行時候解析出來的文件
11.app.vue? 存放的是公共的樣式以及一些公共的js方法
app.vue中不但可以當做是網站首頁，也可以寫所有頁面中公共需要的動畫或者樣式。不在上面寫代碼也可以。
app.vue是主組件，是頁面入口文件，是vue頁面資源的首加載項。所有的頁面都是在app.vue中進行切換的。可以理解為所有的路由都是app.vue的子組件。
?12.min.js 存放的是一些全局使用的方法以及以解全局組件頁面
下載
下載Github上的組件之后，解壓，復制ColorUI-master\demo\下面的colorui文件夾到自己項目里的根目錄即可或者也可以直接引用demo文件即可
樣式引入
- 原生小程序樣式引入
????????????????在app.wxss中引入colorui中的樣式庫，示例如下：
/**app.wxss**/ @import "colorui/main.wxss"; @import "colorui/icon.wxss"; @import "colorui/animation.wxss"; /** 最后這個看自己需求，如果需要使用微動畫則可以引入**/- 存放color-ui的目錄
- uniapp樣式引入
使用
- 自定義導航欄的使用
colorui給我們提供了自定義的導航欄，需要在uniapp項目中做全局引入，使用步驟如下：
- 原生wx小程序全局引入?
- 在app.js獲取系統信息（確定合適的導航欄高度）
- ?在app.json中關閉默認導航欄樣式和引入自定義導航欄
- ?在頁面中使用
- ?效果展示
- ?uniapp全局引入組件
- ?頁面使用
- ??效果展示
?color ui——導航組件屬性以及參數
| bgColor | 背景顏色類名 | String | 空值 ‘’ |
| isCustom | 是否開啟左側 （箭頭+房子圖標） | Boolean | false |
| isBack | 是否開啟左側（箭頭+backText） | Boolean | false |
| bgImage | 背景圖片路徑 | String | 空值 ‘’ |
| backText | 返回時的文字 |
| content | 中間區域 |
| right | 右側區域(小程序端可使用范圍很窄！) |
注意 ：
????????isCustom 頁面跳轉是： /pages/index/index
????????isBack 頁面跳轉是：上一頁
? ? ? ?
1.頁面樣式屬性
注意：
????????頁面使用參數的時候使用clss屬性來定義屬性值
? ? ? ? 1.1 margin外邊距
| 10upx | 20upx | 30upx | 40upx | 50upx |
| 5px | 10px | 15px | 20px | 25px |
?????????1.2padding內邊距
.padding-0{padding:0} .padding-xs{padding:10upx} .padding-sm{padding:20upx} .padding{padding:30upx} .padding-lg{padding:40upx} .padding-xl{padding:50upx} .padding-top-xs{padding-top:10upx} .padding-top-sm{padding-top:20upx} .padding-top{padding-top:30upx} .padding-top-lg{padding-top:40upx} .padding-top-xl{padding-top:50upx} .padding-right-xs{padding-right:10upx} .padding-right-sm{padding-right:20upx} .padding-right{padding-right:30upx} .padding-right-lg{padding-right:40upx} .padding-right-xl{padding-right:50upx} .padding-bottom-xs{padding-bottom:10upx} .padding-bottom-sm{padding-bottom:20upx} .padding-bottom{padding-bottom:30upx} .padding-bottom-lg{padding-bottom:40upx} .padding-bottom-xl{padding-bottom:50upx} .padding-left-xs{padding-left:10upx} .padding-left-sm{padding-left:20upx} .padding-left{padding-left:30upx} .padding-left-lg{padding-left:40upx} .padding-left-xl{padding-left:50upx} .padding-lr-xs{padding-left:10upx;padding-right:10upx} .padding-lr-sm{padding-left:20upx;padding-right:20upx} .padding-lr{padding-left:30upx;padding-right:30upx} .padding-lr-lg{padding-left:40upx;padding-right:40upx} .padding-lr-xl{padding-left:50upx;padding-right:50upx} .padding-tb-xs{padding-top:10upx;padding-bottom:10upx} .padding-tb-sm{padding-top:20upx;padding-bottom:20upx} .padding-tb{padding-top:30upx;padding-bottom:30upx} .padding-tb-lg{padding-top:40upx;padding-bottom:40upx} .padding-tb-xl{padding-top:50upx;padding-bottom:50upx}????????2 布局?
? ? ? ? ? ? ? ?2.1?Flex布局??Flex 布局教程：語法篇
在父級元素類名中添加flex?flex-wrap之后，在子級元素類名添加以下類名即可。
| class名 | class名 | class名 |
| 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種)
| 20% | 40% | 50% | 60% | 80% |
| 加小 | 小號 | 默認 | 大號 | 加小 |
| extra | small | default | small | extra |
?比例布局-num (3種)
| 1（相同寬度） | 2（兩倍寬度） | 3（50%寬度） |
垂直對齊-v (5種)
| 上對齊 | 下對齊 | 中間對齊 | 兩端對齊 | 第1行文字對齊 |
| flex-start | flex-end | flex-center | stretch | baseline |
?水平對齊-h (5種)
| 左對齊 | 右對齊 | 居中 | 左右間隔相等 | 項目兩側的間隔相等 |
| flex-start | flex-end | center | space-between | space-around |
flex布局代碼
.flex{display:flex}/* 對齊 */ .justify-start{justify-content:flex-start} .justify-end{justify-content:flex-end} .justify-center{justify-content:center} .justify-between{justify-content:space-between} .justify-around{justify-content:space-around} .align-start{align-items:flex-start} .align-end{align-items:flex-end} .align-center{align-items:center} .align-stretch{align-items:stretch}/* 其他 */ .flex-direction{flex-direction:column} .flex-wrap{flex-wrap:wrap}/* 固定尺寸 */ .basis-xs{flex-basis:20%} .basis-sm{flex-basis:40%} .basis-df{flex-basis:50%} .basis-lg{flex-basis:60%} .basis-xl{flex-basis:80%}/* 比例分布*/ .flex-sub{flex:1} .flex-twice{flex:2} .flex-treble{flex:3}/* 自對齊 */ .self-start{align-self:flex-start} .self-center{align-self:flex-center} .self-end{align-self:flex-end} .self-stretch{align-self:stretch} .align-stretch{align-items:stretch}? ? ? ? ? ? ? ?2.2 Grid布局
| grid | 柵格布局（必須） | display:flex;flex-wrap:wrap; |
| col-{num} | 等列 | 參數：1，2，3，4，5 |
| grid-square | 等高 |
? ? ? ? ? ? ? ? 2.3輔助布局
| margin-{size} | 外邊距 | margin:10rpx; |
| magin-{position}-{size} | 外邊距-具體一邊 | margin-top:10rpx; |
| padding-{size} | 內邊距 | padding:10rpx; |
| fl | 左浮動 | float:left; |
| fr | 右浮動 | float:right; |
輔助布局-size (6種)
| 0 | 10rpx | 20rpx | 30rpx | 40rpx | 50rpx |
輔助布局-position (6種)
| 上 | 右 | 下 | 左 | left-right | top-bottom |
? ? ? ? 3.背景顏色Background
? ? ? ? ? ? ? ? 3.1深色背景 bg-{color} 15個
????????????????
| .bg-red （嫣紅） | .bg-orange（桔橙） | .bg-yellow（明黃） |
| .bg-olive（橄欖） | .bg-green（森綠） | .bg-cyan（天青） |
| .bg-blue（海藍） | .bg-purple（姹紫） | .bg-mauve（木槿） |
| .bg-pink（桃粉） | .bg-brown（棕褐） | .bg-grey（玄灰） |
| .bg-gray（草灰） | .bg-black（墨黑） | .bg-white（雅白） |
?????????????????3.2淡色背景 bg-{color}后面加.light?15個
| .bg-red （嫣紅） | .bg-orange（桔橙） | .bg-yellow（明黃） |
| .bg-olive（橄欖） | .bg-green（森綠） | .bg-cyan（天青） |
| .bg-blue（海藍） | .bg-purple（姹紫） | .bg-mauve（木槿） |
| .bg-pink（桃粉） | .bg-brown（棕褐） | .bg-grey（玄灰） |
| .bg-gray（草灰） | .bg-black（墨黑） | .bg-white（雅白） |
? ? ? ? ? ? ? ? ? 3.3漸變?.bg-gradual-{color}
| .bg-gradual-red | .bg-gradual-orange |
| .bg-gradual-green | .bg-gradual-purple |
| .bg-gradual-pink | .bg-gradual-blue |
| .bg-shadeTop | .bg-shadeBottom |
????????4.圖片背景????????
bg-img 把背景圖片放大到適合元素容器的尺寸，圖片比例不變。注意，超出容器的部分可能會裁掉。
bg-shadeTop 背景圖片加一層黑色遮罩上面開始
bg-shadeBottom 背景圖片加一層黑色遮罩下面開始
寫內置樣式配合用
background-image
height
一個加了 遮罩，一個沒有
總結：
?
?
? ? ? ? 5.邊框陰影顏色?
| line-{color} | 細邊框顏色 | ::after偽元素 border-color:red; |
| lines-{color} | 粗邊框顏色 | ::after偽元素 border-color:red; |
? ? ? ? ?6.文字Text
| text-{size} | 文字大小 | font-size: 20rpx; |
| text-{color} | 文字顏色 | color: red; |
| text-{align} | 字體對齊 | text-align: center; |
| text-{Fixed} | 固定參數 | text-transform: Capitalize; |
大小Size (8種)
| xs | 20rpx | 說明文本，標簽文字等關注度低的文字 |
| sm | 24rpx | 頁面輔助信息，次級內容等 |
| df | 28rpx | 頁面默認字號，用于摘要或閱讀文本 |
| lg | 32rpx | 頁面小標題，首要層級顯示內容 |
| xl | 36rpx | 頁面大標題，用于結果頁等單一信息頁 |
| xxl | 44rpx | 用于金額數字等信息 |
| sl | 80rpx | 用于圖標、數字等較大顯示 |
| xsl | 120rpx | 用于圖標、數字等特大顯示 |
?顏色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種，一種是多個參數（大小，顏色，對齊），一種是固定參數（陰影，加粗，大小寫等）?
?
?????????7.圖標icon
? ? ? ? ? ? ? ? 7.1 culcon-{iconName} 直接設置圖標
圖標分為 內置和外置 （都來自 阿里巴巴 iconfont）
????????????????默認圖標
| female | \e71a |
| male | \e71c |
| check | \e645 |
| close | \e646 |
| loading | \e7f1 |
| right | \e6a3 |
| radioboxfill | \e763 |
| roundclosefill | \e658 |
| emoji | \e64a |
| icloading | \e67a |
圖標用法：
由于之前在app.vue引入了icon.css，因此在這里要使用的話，直接用即可。
使用方法：text標簽，類名：cuIcon-{{name}}
注意：
????????其中，colorui的圖標，大部分是有兩個模式的，一個普通狀態，一個fill狀態。fill狀態直接在普通狀態的名字后面加上fill即可。
其他用法這里就不一一詳述了，直接看源文件即可。
代碼如下：
<text class="cuIcon-apps text-gray"></text>? ? ? ? ?8.按鈕Button
1.按鈕必選 cu-btn
2.默認 cu-btn，round為圓角，cuIcon為圓形包裹圖標
3.尺寸 默認， sm 小尺寸， lg大尺寸
4.顏色 bg-{{colorName}}
5.陰影 shadow
6.鏤空 line-{{color}} 或 lines-{{colors}} 粗邊框
7.塊狀 lg
8.禁用 disable
9.加圖標 cuIcon-{{iconName}} 包裹在 button內
注意：
????????button 記得去掉 “style”: “v2”,
? ? ? ? 9.標簽 Tag
1.標簽必選 cu-tag
2.默認 cu-tag，round為圓角，radius為圓角
3.尺寸 sm 小尺寸
4.顏色 bg-{{colorName}}
5.陰影 shadow
6.鏤空 line-{{color}} 或 lines-{{colors}} 粗邊框
7.膠囊 cu-capsule 用包裹
8.數字 badge
? ? ? ? 10.頭像 Avatar?
1.頭像必選 cu-avatar
2.形狀 round 圓形 radius方形
3.尺寸 sm 默認 lg xl 4種
4.內嵌文字(圖標) 用包裹
5.顏色 bg-{colorName}
6.組 cu-avatar 添加 cu-avatar-group
7.標簽 內 加 cu-tag
?????????11.進度條 Progress
1.進度條必選 cu-progress
2.形狀 默認方形 rauius 為圓角 round圓形 loading 初始是false,頁面需要賦值為true
3.尺寸 默認 sm xs
4.顏色 bg-{{colorName}}
5.條紋 striped active 動態效果
6.比例 在cu-progress內 : style=“width:50%”
7.布局 包含內設置
????????12.邊框陰影 Border&Shadow?
direction 參數是 top -right -bottom -left
| .solid | 四周-細邊框 |
| .solid-{direction} | 具體某個方向-細邊框 |
| .solids | 四周-粗邊框 |
| .solids-{direction} | 具體某個方向-粗邊框 |
| .shadow | 根據背景顏色而改變的陰影 |
| .shadow .shadow-lg | 長陰影 |
| .shadow-warp | 翹邊陰影 |
| .shadow-blur | 根據背景圖而改變的陰影 |
? ? ? ? 13.加載 Loading
1.加載必選 cu-load
2.狀態 loading正在加載中，over加載完成，erro加載失敗
3.背景 bg-{{colorName}}
4.彈框加載 load-modal
5.進度條加載 load-progress
6.進度條樣式 load-progress-bar
7.旋轉加載樣式 load-progress-spinner
8.隱藏 hide
9.顯示 show
13.組件 Componet
? ? ? ? ?13.1操作條Tab
1.操作條必選 cu-bar
2.操作條必選 tabbar
3.固定在頁面底部 foot
4.小程序tabbar的minButton
5.購物操作條必選值 shop
6.提交按鈕 submin
7.帶下邊框樣式的標題 border-title
8.css屬性align-self:flex-end self-end
9.搜索框 search-form
10.輸入框樣式 input
? 基本用法cu-bar
<view class="cu-bar"> 必須的<view>1</view><view>2</view> </view>?效果是 左右 靠邊對齊 相當（flex align-center justify-between）
目標效果
?如果里面有4個
?結合icon和tab使用
<view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]"><view class="action"><text class='cuIcon-title text-blue'></text>常用服務</view> </view>? ? ? ? ?13.2導航欄 nav
1.導航欄 nav
2.導航欄子元素 cu-item
3.flex布局 flex
4.平分 flex-sub
5.居中 text-center
? ? ? ? ? 13.3列表List
1.列表必選值 cu-list
2.列表子元素 cu-item
3.無邊框 no-border
4.菜單列表 menu
5.短邊框 sm-border
6.卡片樣式的菜單列表 card-menu
7.右箭頭 arrow
8.消息列表(帶頭像) cu-avatar
9.內容 content
10.灰度 grayscale
11.cur
12.左移 move-cur
? ? ? ? ? 13.4卡片Card
1.卡片必選值 cu-card
2.案例類卡片 case
3.動態類卡片 dynamic
4.文章類卡片 article
5.評論 comment
6.配合cu-card，去除子元素cu-item的margin和border no-card
7.縱向的flex布局 desc
? ? ? ? ? 13.5表單Form
1.表單子元素 cu-form-group
2.標題 title
? ? ? ? ? 13.6時間軸TimeLine
1.cu-timeLine 包裹 cu-time和cu-item
2.cu-item 包裹 content 內容
? ? ? ? ? 13.7聊天 chat
1.聊天必選值 cu-chat
2.子元素 cu-item
3.右側本人的聊天樣式 self
4.聊天內容 main
5.消息內容 content
6.消息日期 date
7.提示詞 cu-info
? ? ? ? ? 13.8輪播
1.全屏限高輪播 screen-swiper
2.方形指示點 square-dot
3.圓形指示點 round-dot
4.卡片式輪播 card-swiper
5.滑動切換區域 swiper-item
6.堆疊式輪播 tower-swiper
7.堆疊式輪播子元素 tower-item
? ? ? ? ? 13.9靜態框 modal
1.基本
- 模態框必選 cu-modal
- 顯示彈框 show
- 子元素 cu-dialog
2.樣式
- 底部彈框 bottom-modal
- 側邊彈框 drawer-modal
3.Modal細節
- modal默認是全部居中，可在cu-diolog 后面加個內置樣式 text-align:left
- 如：< view class=“cu-dialog” style=“text-align: left;”>
? ? ? ? ? 13.10?步驟條
1.步驟條必選 cu-steps
2.子元素 cu-item
3.數字步驟條未完成圖標 num
4.錯誤圖標 err
5.步驟條連接箭頭 steps-arrow
6.配合多級步驟使用 steps-bottom
總結
- 上一篇： oracle job 定时执行参数
- 下一篇： 一行命令 优化上传速度