ColorUI/demo/pages/component/bar/bar.wxml

<custom style="height:{{CustomBar}}px;">
  <bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
      <text class='icon-back'></text>
      <text>操作条</text>
    </navigator>
  </bar>
</custom>

<bar class="margin-top">
  <view class='action'>
    <text class='icon-back text-gray'></text>
    <text>返回</text>
  </view>
</bar>

<bar class="margin-top">
  <view class='action'>
    <text class='icon-title text-green'></text>
    <text>案例</text>
  </view>
  <view class='action'>
    <button class='bg-green shadow-blur sm'>添加
      <text class='icon-add'></text> </button>
  </view>
</bar>

<bar class="margin-top justify-end">
  <view class='action'>
    <text class='icon-close text-red'></text>
  </view>
</bar>

<bar class="margin-top">
  <view class='action'>
    <text class='icon-back text-gray'></text> 返回
  </view>
  <view class='content'>
    操作条
  </view>
</bar>

<bar class="margin-top">
  <view class='action'>
    <text class='icon-homefill text-gray'></text> 首页
  </view>
  <view class='content'>
    鲜亮的高饱和色彩，专注视觉的小程序组件库
  </view>
  <view class='action'>
    <text class='icon-cardboardfill text-grey'></text>
    <text class='icon-recordfill text-red'></text>
  </view>
</bar>

<bar class="margin-top bg-blue">
  <view class='action'>
    <text class='icon-close'></text> 关闭
  </view>
  <view class='content'>
    海蓝
  </view>
</bar>
<bar class="margin-top bg-orange">
  <view class='action'>
    <text class='icon-back'></text> 返回
  </view>
  <view class='content'>
    操作条
  </view>
</bar>

<bar class="margin-top bg-black search">
  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
  <view class='content'>
    ColorUI
  </view>
  <view class='action'>
    <text class="icon-more"></text>
  </view>
</bar>

<bar class="margin-top bg-red search">
  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
  <view class='search-form radius'>
    <text class="icon-search"></text>
    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
  </view>
  <view class='action'>
    <text>广州</text>
    <text class="icon-triangledownfill"></text>
  </view>
</bar>

<bar class="margin-top search">
  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
  <view class='search-form round'>
    <text class="icon-search"></text>
    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
  </view>
  <view class='action'>
    <text>广州</text>
    <text class="icon-triangledownfill"></text>
  </view>
</bar>

<bar class="margin-top bg-cyan search">
  <view class='search-form radius'>
    <text class="icon-search"></text>
    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
  </view>
  <view class='action'>
    <text class='icon-close'></text>
    <text>取消</text>
  </view>
</bar>

<bar class="margin-top search">
  <view class='search-form round'>
    <text class="icon-search"></text>
    <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
  </view>
  <view class='action'>
    <button class='bg-green shadow-blur round'>搜索</button>
  </view>
</bar>

<bar class="margin-top btn-group">
  <button class='bg-green shadow-blur round'>保存</button>
</bar>

<bar class="margin-top btn-group">
  <button class='bg-green shadow-blur round lg'>保存</button>
</bar>

<bar class="margin-top btn-group">
  <button class='bg-green shadow-blur'>保存</button>
  <button class='text-green line-green shadow'>上传</button>
</bar>

<bar class="margin-top btn-group">
  <button class='bg-green shadow-blur round'>保存</button>
  <button class='bg-blue shadow-blur round'>提交</button>
</bar>

<bar class="margin-top shop">
  <button class="action"  open-type='contact'>
    <text class='icon-service text-green'>
      <tag class='badge'></tag>
    </text>
    客服
  </button>
  <view class="action text-orange">
    <text class='icon-favorfill'></text> 已收藏
  </view>
  <view class="action">
    <text class='icon-cart'>
      <tag class='badge'>99</tag>
    </text>
    购物车
  </view>
  <view class='bg-red submit'>立即订购</view>
</bar>

<bar class="margin-top shop">
  <button class="action"  open-type='contact'>
    <text class='icon-service text-green'>
      <tag class='badge'></tag>
    </text>
    客服
  </button>
  <view class="action">
    <text class='icon-cart'>
      <tag class='badge'>99</tag>
    </text>
    购物车
  </view>
  <view class='bg-orange submit'>加入购物车</view>
  <view class='bg-red submit'>立即订购</view>
</bar>

<bar class="margin-top shop">
  <button class="action"  open-type='contact'>
    <text class='icon-service text-green'>
      <tag class='badge'></tag>
    </text>
    客服
  </button>
  <view class="action">
    <text class=' icon-shop'></text> 店铺
  </view>
  <view class="action">
    <text class='icon-cart'>
      <tag class='badge'>99</tag>
    </text>
    购物车
  </view>
  <view class='submit'>
    <button class='bg-red round shadow-blur'>立即订购</button>
  </view>
</bar>

<bar class="margin-top shop">
  <button class="action"  open-type='contact'>
    <text class='icon-service text-green'>
      <tag class='badge'></tag>
    </text>
    客服
  </button>
  <view class="action">
    <text class='icon-cart'>
      <tag class='badge'>99</tag>
    </text>
    购物车
  </view>
  <view class='submit'>
    <button class='bg-orange round shadow-blur'>加入购物车</button>
  </view>
  <view class='submit'>
    <button class='bg-red round shadow-blur'>立即订购</button>
  </view>
</bar>

<bar class="margin-top input">
  <view class='action'>
    <text class='icon-sound text-grey'></text>
  </view>
  <input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
  <view class='action'>
    <text class='icon-emojifill text-grey'></text>
  </view>
  <button class='bg-green shadow-blur'>发送</button>
</bar>

<bar class="margin-top input">
  <avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
  <view class='action'>
    <text class='icon-roundaddfill text-grey'></text>
  </view>
  <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
  <view class='action'>
    <text class='icon-emojifill text-grey'></text>
  </view>
  <button class='bg-green shadow-blur'>发送</button>
</bar>