tabbar 操作條 · Color Ui 聯合開發文檔

``` //初始視圖容器 <view class="box"> </view> ``` ## **底部操作條** #### 示例 :-: ![](https://img.kancloud.cn/bf/45/bf4593175122be99b8a809f84513c541_318x140.png) #### **xxx.wxml** ``` <view class="cu-bar tabbar bg-white"> <view class="action"> <view class="cuIcon-cu-image"> <image src="/images/tabbar/basics_cur.png"></image> </view> <view class="text-green">元素</view> </view> <view class="action"> <view class="cuIcon-cu-image"> <image src="/images/tabbar/component.png"></image> </view> <view class="text-gray">組件</view> </view> <view class="action"> <view class="cuIcon-cu-image"> <image src="/images/tabbar/plugin.png"></image> <view class="cu-tag badge">99</view> </view> <view class="text-gray">擴展</view> </view> <view class="action"> <view class="cuIcon-cu-image"> <image src="/images/tabbar/about.png"></image> <view class="cu-tag badge"></view> </view> <view class="text-gray">關于</view> </view> </view> // TOW <view class="cu-bar tabbar margin-bottom-xl bg-black"> <view class="action text-orange"> <view class="cuIcon-homefill"></view> 首頁 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分類 </view> <view class="action text-gray"> <view class="cuIcon-recharge"></view> 積分 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view> ``` #### **xxx.wxss** ``` .box { margin: 20rpx 0; } .box view.cu-bar { margin-top: 20rpx; } ``` #### **xxx.JS** ``` 無 ``` ## **底部操作條 -- 02** #### 示例 :-: ![](https://img.kancloud.cn/45/3d/453d3f24e01668baf75bb27efa58bde4_318x124.png) #### **xxx.wxml** ``` <view class="cu-bar tabbar margin-bottom-xl bg-white"> <view class="action text-green"> <view class="cuIcon-homefill"></view> 首頁 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分類 </view> <view class="action text-gray add-action"> <button class="cu-btn cuIcon-add bg-green shadow"></button> 發布 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view> //TOW <view class="cu-bar tabbar bg-black"> <view class="action text-green"> <view class="cuIcon-homefill"></view> 首頁 </view> <view class="action text-gray"> <view class="cuIcon-similar"></view> 分類 </view> <view class="action text-gray add-action"> <button class="cu-btn cuIcon-add bg-green shadow"></button> 發布 </view> <view class="action text-gray"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="action text-gray"> <view class="cuIcon-my"> <view class="cu-tag badge"></view> </view> 我的 </view> </view> ``` ## **底部操作條 -- 03** #### 示例 :-: ![](https://img.kancloud.cn/41/4e/414ee4749271aa9be42b9cccb0568857_320x202.png) #### **xxx.wxml** ``` <view class="cu-bar bg-white tabbar border shop"> <button class="action" open-type="contact"> <view class="cuIcon-service text-green"> <view class="cu-tag badge"></view> </view> 客服 </button> <view class="action text-orange"> <view class="cuIcon-favorfill"></view> 已收藏 </view> <view class="action"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="bg-red submit">立即訂購</view> </view> //TOW <view class="cu-bar bg-white tabbar border shop"> <button class="action" open-type="contact"> <view class="cuIcon-service text-green"> <view class="cu-tag badge"></view> </view> 客服 </button> <view class="action"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="bg-orange submit">加入購物車</view> <view class="bg-red submit">立即訂購</view> </view> // THREE <view class="cu-bar bg-white tabbar border shop"> <button class="action" open-type="contact"> <view class="cuIcon-service text-green"> <view class="cu-tag badge"></view> </view> 客服 </button> <view class="action"> <view class=" cuIcon-shop"></view> 店鋪 </view> <view class="action"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="btn-group"> <button class="cu-btn bg-red round shadow-blur">立即訂購</button> </view> </view> //FOUR <view class="cu-bar bg-white tabbar border shop"> <button class="action" open-type="contact"> <view class="cuIcon-service text-green"> <view class="cu-tag badge"></view> </view> 客服 </button> <view class="action"> <view class="cuIcon-cart"> <view class="cu-tag badge">99</view> </view> 購物車 </view> <view class="btn-group"> <button class="cu-btn bg-orange round shadow-blur">加入購物車</button> <button class="cu-btn bg-red round shadow-blur">立即訂購</button> </view> </view> </view> ``` ## **標題操作條** #### 示例 :-: ![](https://img.kancloud.cn/7a/1e/7a1e8c2ffd981ed54750993b23408e3f_316x343.png) #### **xxx.wxml** ``` <view class="box" wx:if="{{false}}"> <view class="cu-bar justify-center bg-white"> <view class="action border-title"> <text class="text-xl text-bold">關于我們</text> <text class="bg-grey" style="width:2rem"></text>  </view> </view> <view class="cu-bar justify-center bg-white"> <view class="action border-title"> <text class="text-xl text-bold text-blue">關于我們</text> <text class="bg-gradual-blue" style="width:3rem"></text> </view> </view> <view class="cu-bar justify-center bg-white"> <view class="action sub-title"> <text class="text-xl text-bold text-green">關于我們</text> <text class="bg-green" style="width:2rem"></text>  </view> </view> <view class="cu-bar justify-center bg-white"> <view class="action sub-title"> <text class="text-xl text-bold text-blue">關于我們</text> <text class="text-ABC text-blue">about</text>  </view> </view> </view> <view class="box"> <view class="cu-bar bg-white"> <view class="action border-title"> <text class="text-xl text-bold">關于我們</text> <text class="bg-grey" style="width:2rem"></text>  </view> </view> <view class="cu-bar bg-white"> <view class="action border-title"> <text class="text-xl text-bold text-blue">關于我們</text> <text class="bg-gradual-blue" style="width:3rem"></text> </view> </view> <view class="cu-bar bg-white"> <view class="action sub-title"> <text class="text-xl text-bold text-green">關于我們</text> <text class="bg-green"></text>  </view> </view> <view class="cu-bar bg-white"> <view class="action sub-title"> <text class="text-xl text-bold text-blue">關于我們</text> <text class="text-ABC text-blue">about</text>  </view> </view> <view class="cu-bar bg-white"> <view class="action title-style-3"> <text class="text-xl text-bold">關于我們</text> <text class="text-Abc text-gray self-end margin-left-sm">about</text> </view> </view> <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-title text-green"></text> <text class="text-xl text-bold">關于我們</text> </view> </view> <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-titles text-green"></text> <text class="text-xl text-bold">關于我們</text> </view> </view> </view> ``` ## **頂部操作條** #### 示例 :-: ![](https://img.kancloud.cn/8e/9a/8e9aca4d14a197bc773e4ef8d7571715_320x242.png) #### **xxx.wxml** ``` <view class="box"> <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-back text-gray"></text> 返回 </view> <view class="content text-bold"> 操作條 </view> </view> <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-homefill text-gray"></text> 首頁 </view> <view class="content text-bold"> 鮮亮的高飽和色彩，專注視覺的小程序組件庫 </view> <view class="action"> <text class="cuIcon-cardboardfill text-grey"></text> <text class="cuIcon-recordfill text-red"></text> </view> </view> <view class="cu-bar bg-blue"> <view class="action"> <text class="cuIcon-close"></text> 關閉 </view> <view class="content text-bold"> 海藍 </view> </view> <view class="cu-bar bg-black search"> <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view> <view class="content"> ColorUI </view> <view class="action"> <text class="cuIcon-more"></text> </view> </view> </view> ``` ## **搜索操作條** #### 示例 :-: ![](https://img.kancloud.cn/81/0d/810d3adbc20e9709795037003480f853_320x193.png) #### **xxx.wxml** ``` <view class="box"> <view class="cu-bar search bg-white"> <view class="search-form round"> <text class="cuIcon-search"></text> <input type="text" placeholder="搜索圖片、文章、視頻" confirm-type="search"></input> </view> <view class="action"> <button class="cu-btn bg-green shadow-blur round">搜索</button> </view> </view> <view class="cu-bar search bg-white"> <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view> <view class="search-form round"> <text class="cuIcon-search"></text> <input type="text" placeholder="搜索圖片、文章、視頻" confirm-type="search"></input> </view> <view class="action"> <text>廣州</text> <text class="cuIcon-triangledownfill"></text> </view> </view> <view class="cu-bar bg-red search"> <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view> <view class="search-form radius"> <text class="cuIcon-search"></text> <input type="text" placeholder="搜索圖片、文章、視頻" confirm-type="search"></input> </view> <view class="action"> <text>廣州</text> <text class="cuIcon-triangledownfill"></text> </view> </view> <view class="cu-bar bg-cyan search"> <view class="search-form radius"> <text class="cuIcon-search"></text> <input type="text" placeholder="搜索圖片、文章、視頻" confirm-type="search"></input> </view> <view class="action"> <text class="cuIcon-close"></text> <text>取消</text> </view> </view> </view> ``` ## **輸入操作條** #### 示例 :-: ![](https://img.kancloud.cn/df/4f/df4f711d7932e39b1533109e82dbce3f_320x99.png) #### **xxx.wxml** ``` <view class="box"> <view class="cu-bar input"> <view class="action"> <text class="cuIcon-sound text-grey"></text> </view> <input class="solid-bottom" focus="{{false}}" maxlength="300" cursor-spacing="10"></input> <view class="action"> <text class="cuIcon-emojifill text-grey"></text> </view> <button class="cu-btn bg-green shadow-blur">發送</button> </view> <view class="cu-bar input"> <view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view> <view class="action"> <text class="cuIcon-roundaddfill text-grey"></text> </view> <input class="solid-bottom" maxlength="300" cursor-spacing="10"></input> <view class="action"> <text class="cuIcon-emojifill text-grey"></text> </view> <button class="cu-btn bg-green shadow-blur">發送</button> </view> </view> ```