微信小程序开发指南

基于ColorUI的组件化页面开发


标题操作条

标题操作条

  • 样式图例

  • 示例代码
<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>
      <!-- 底部样式 last-child选择器-->
    </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>
      <!-- last-child选择器-->
    </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>
      <!-- last-child选择器-->
    </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>

页面列表

ITEM_HTML