微信小程序开发指南

基于ColorUI的组件化页面开发


按钮设计

1. 选择颜色

  • 样式图例

  • 示例代码
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">
  <view class="title">选择颜色</view>
  <view class="padding bg-{{color}} solid radius shadow-blur"></view>
</view>

<!-- modal -->
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar justify-end solid-bottom">
      <view class="content">选择颜色</view>
      <view class="action" bindtap="hideModal">
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class="grid col-5 padding">
      <view class="padding-xs" wx:for="{{ColorList}}" wx:key bindtap="SetColor" data-color="{{item.name}}" wx:if="{{item.name!='white'}}">
        <view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
      </view>
    </view>
  </view>
</view>

2.是否圆角

  • 样式图例

  • 示例代码
<view class="cu-form-group">
  <view class="title">是否圆角</view>
  <switch class="sm" bindchange="SetRound"></switch>
</view>

3.选择尺寸

  • 样式图例

  • 示例代码
<view class="cu-form-group">
  <view class="title">选择尺寸</view>
  <radio-group bindchange="SetSize">
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="sm"></radio>
      <text> 小</text>
    </label>
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="" checked></radio>
      <text> 中</text>
    </label>
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="lg"></radio>
      <text> 大</text>
    </label>
  </radio-group>
</view>

4.是否添加阴影

  • 样式图例

  • 示例代码
<view class="cu-form-group">
  <view class="title">是否添加阴影</view>
  <switch class="sm" bindchange="SetShadow"></switch>
</view>
<view class="cu-form-group">
  <view class="title">是否镂空</view>
  <switch class="sm" bindchange="SetBorder"></switch>
</view>
<view  class="cu-form-group" wx:if="{{border}}">
  <view class="title">边框大小</view>
   <radio-group bindchange="SetBorderSize">
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="" checked></radio>
      <text> 小</text>
    </label>
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="s"></radio>
      <text> 大</text>
    </label>
  </radio-group>
</view>

5.是否镂空/边框大小

  • 样式图例

  • 示例代码
<view class="cu-form-group">
  <view class="title">是否镂空</view>
  <switch class="sm" bindchange="SetBorder"></switch>
</view>
<view  class="cu-form-group" wx:if="{{border}}">
  <view class="title">边框大小</view>
   <radio-group bindchange="SetBorderSize">
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="" checked></radio>
      <text> 小</text>
    </label>
    <label class="margin-left-sm">
      <radio class="blue sm radio" value="s"></radio>
      <text> 大</text>
    </label>
  </radio-group>
</view>

页面列表

ITEM_HTML