<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">按钮 / 设计</view></cu-custom>
<view class="padding-xl">
  <view class="box bg-white text-center radius {{block?'flex-direction':''}}">
    <button class="cu-btn {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}">我是一个按钮</button>
  </view>
  <view class="padding text-center"> class="cu-btn<text wx:if="{{color}}"> {{border?'line':'bg'}}{{bordersize?bordersize:''}}-{{color}} {{round?'round':''}} {{size}} {{shadow?'shadow':''}} {{block?'block':''}}</text>" </view>
</view>
<view class="cu-form-group margin-top" bindtap="showModal" data-target="ColorModal">
  <view class="title">选择颜色</view>
  <view class="padding-sm bg-{{color}} solid radius shadow-blur"></view>
</view>
<view class="cu-form-group">
  <view class="title">是否圆角</view>
  <switch class="sm" bindchange="SetRound"></switch>
</view>
<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>
<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>
<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="icon-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}}">
        <view class="padding-tb bg-{{item.name}} radius"> {{item.title}} </view>
      </view>
    </view>
  </view>
</view>