按钮设计
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=674267337effbe34e3e162491ca342b3&file=file.png" alt="" /></p>
<h4>1. 选择颜色</h4>
<ul>
<li>样式图例</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=c15849ae0176157a8a3045b8f592acfe&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<pre><code class="language-html"><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></code></pre>
<h4>2.是否圆角</h4>
<ul>
<li>样式图例</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=e264ca18d440b21a846101e28444cac2&file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=d3fbba7aa742c8f67ada38a5b9bffa6d&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<pre><code class="language-html"><view class="cu-form-group">
<view class="title">是否圆角</view>
<switch class="sm" bindchange="SetRound"></switch>
</view></code></pre>
<h4>3.选择尺寸</h4>
<ul>
<li>
<p>样式图例
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a8e28a689def9854000beb332b775fa6&file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=a8dbfee10ca5ccabcaf7ec85afa57b5d&file=file.png" alt="" /></p>
</li>
<li>示例代码</li>
</ul>
<pre><code class="language-html"><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></code></pre>
<h4>4.是否添加阴影</h4>
<ul>
<li>样式图例</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=d122a47af526ff3c97a53c93c67b2cbc&file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=744bc5e2622e3b401af9021bc5ff1e5d&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<pre><code class="language-html"><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></code></pre>
<h4>5.是否镂空/边框大小</h4>
<ul>
<li>样式图例</li>
</ul>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=9826819cb3ceffba758220bbe08b37b1&file=file.png" alt="" />
<img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=fb1a3889c6c331f85f616c3d49b234c5&file=file.png" alt="" /></p>
<ul>
<li>示例代码</li>
</ul>
<pre><code class="language-html"><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></code></pre>