ColorUI使用与技巧
生活随笔
收集整理的這篇文章主要介紹了
ColorUI使用与技巧
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1 ColorUI學習
- 1.1 準備
- 1.2 自定義導航欄
- 1??app.json 配置取消系統導航欄，并全局引入組件
- 2??app.js 獲得系統信息
- 3??page wxml頁面可以直接調用了
- 2 基礎元素basic
- 2.1 布局 Layout
- 1??Flex布局
- 2??Grid布局
- 3??輔助布局
- 2.2 背景Background
- 2.3 文字 Text
- 2.4 圖標icon
- 2.5 按鈕Button
- 2.6 標簽 Tag
- 2.7 頭像 Avatar
- 2.8 進度條 Progress
- 2.9 邊框陰影 Border&Shadow
- 2.10 加載 Loading
- 3 組件 Componet
- 3.1 操作條Tab
- 1??基本用法cu-bar
- 2??內部修飾action
- 3??操作條 tabbar
- 3.2 導航欄 nav
- 3.3 列表List
- 3.4 卡片Card
- 3.5 表單Form
- 3.6 時間軸TimeLine
- 3.7 聊天 chat
- 3.8 輪播
- 3.9 靜態框 modal
- 3.10 步驟條
1 ColorUI學習
簡介：ColorUI 鮮亮的高飽和色彩，專注視覺的小程序組件庫
感謝：作者 文曉港
1.1 準備
引入資源 demo中的colorui – app.wxss
@import '/colorui/icon.wxss'; @import '/colorui/main.wxss';1.2 自定義導航欄
1??app.json 配置取消系統導航欄，并全局引入組件
"window": {"navigationBarBackgroundColor": "#39b54a","navigationBarTitleText": "Color UI","navigationStyle": "custom", //1 取消"navigationBarTextStyle": "white"},"usingComponents": { //2 引入"cu-custom":"/colorui/components/cu-custom"},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;}} })3??page wxml頁面可以直接調用了
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">導航欄</view> </cu-custom>參數
| bgColor | 背景顏色類名 | String | 空值 ‘’ |
| isCustom | 是否開啟左側 （箭頭+房子圖標） | Boolean | false |
| isBack | 是否開啟左側（箭頭+backText） | Boolean | false |
| bgImage | 背景圖片路徑 | String | 空值 ‘’ |
| backText | 在isBack為true，顯示最左側（一般是返回） |
| content | 中間區域文字（一般是標題） |
| right | 右側區域文字 （一般是小提示）(icon圖標) |
注意 ：
isCustom 頁面跳轉是： /pages/index/index
isBack 頁面跳轉是：上一頁
2 基礎元素basic
2.1 布局 Layout
1??Flex布局
| 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; |
| 20% | 40% | 50% | 60% | 80% |
| 加小 | 小號 | 默認 | 大號 | 加小 |
| extra | small | default | small | extra |
| 1 | 2 | 3 |
| 上對齊 | 下對齊 | 中間對齊 | 兩端對齊 | 第1行文字對齊 |
| flex-start | flex-end | flex-center | stretch | baseline |
| 左對齊 | 右對齊 | 居中 | 左右間隔相等 | 項目兩側的間隔相等 |
| flex-start | flex-end | center | space-between | space-around |
2??Grid布局
| grid | 柵格布局（必須） | display:flex;flex-wrap:wrap; |
| col-{num} | 等列 | 參數：1，2，3，4，5 |
| grid-square | 等高 |
3??輔助布局
| margin-{size} | 外邊距 | margin:10rpx; |
| magin-{position}-{size} | 外邊距-具體一邊 | margin-top:10rpx; |
| padding-{size} | 內邊距 | padding:10rpx; |
| fl | 左浮動 | float:left; |
| fr | 右浮動 | float:right; |
| 0 | 10rpx | 20rpx | 30rpx | 40rpx | 50rpx |
?輔助布局-position (6種)
| 上 | 右 | 下 | 左 | left-right | top-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 背景圖片加一層黑色遮罩下面開始
寫內置樣式配合用
background-image
height
一個加了 遮罩，一個沒有
總結：
| bg-{color} | 深色背景 | background-color:red;color:darkColor; |
| line-{color} | 細邊框顏色 | ::after偽元素 border-color:red; |
| lines-{color} | 粗邊框顏色 | ::after偽元素 border-color:red; |
2.3 文字 Text
| text-{size} | 文字大小 | font-size: 20rpx; |
| text-{color} | 文字顏色 | color: red; |
| text-{align} | 字體對齊 | text-align: center; |
| text-{Fixed} | 固定參數 | text-transform: Capitalize; |
| xs | 20rpx | 說明文本，標簽文字等關注度低的文字 |
| sm | 24rpx | 頁面輔助信息，次級內容等 |
| df | 28rpx | 頁面默認字號，用于摘要或閱讀文本 |
| lg | 32rpx | 頁面小標題，首要層級顯示內容 |
| xl | 36rpx | 頁面大標題，用于結果頁等單一信息頁 |
| xxl | 44rpx | 用于金額數字等信息 |
| sl | 80rpx | 用于圖標、數字等較大顯示 |
| xsl | 120rpx | 用于圖標、數字等特大顯示 |
?顏色Color (15種)
| 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
| .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>效果是 左右 靠邊對齊 相當（flex align-center justify-between）
如果里面有4個
2??內部修飾action
<view class="cu-bar"> 必須的<view class="action">1</view><view class="action">2</view> </view>效果：目前看到效果，左右對齊有間隔
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
總結
以上是生活随笔為你收集整理的ColorUI使用与技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： snap7
- 下一篇： 【 Grey Hack 】万金油脚本：从