mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
v2.0.4
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<custom style="height:{{CustomBar}}px;">
|
||||
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 按钮
|
||||
</navigator>
|
||||
@@ -7,31 +7,31 @@
|
||||
<text class='icon-skinfill'></text>
|
||||
<text class="text-df">设计</text>
|
||||
</navigator>
|
||||
</bar>
|
||||
</custom>
|
||||
<bar>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>按钮形状
|
||||
</view>
|
||||
</bar>
|
||||
</view>
|
||||
<view class="padding flex flex-wrap justify-between align-center">
|
||||
<button>默认</button>
|
||||
<button class='round'>圆角</button>
|
||||
<button class='icon'>
|
||||
<button class='cu-btn'>默认</button>
|
||||
<button class='cu-btn round'>圆角</button>
|
||||
<button class='cu-btn icon'>
|
||||
<text class='icon-emojifill'></text>
|
||||
</button>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>按钮尺寸
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding flex flex-wrap justify-between align-center">
|
||||
<button class='round sm'>小尺寸</button>
|
||||
<button class='round'>默认</button>
|
||||
<button class='round lg'>大尺寸</button>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="padding flex flex-wrap justify-between align-center">
|
||||
<button class='cu-btn round sm'>小尺寸</button>
|
||||
<button class='cu-btn round'>默认</button>
|
||||
<button class='cu-btn round lg'>大尺寸</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>按钮颜色
|
||||
</view>
|
||||
@@ -39,13 +39,13 @@
|
||||
<text class='text-df'>阴影</text>
|
||||
<switch class='sm' bindchange='SetShadow'></switch>
|
||||
</view>
|
||||
</bar>
|
||||
</view>
|
||||
<view class='grid col-5 padding-sm'>
|
||||
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
|
||||
<button class='round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
|
||||
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>镂空按钮
|
||||
</view>
|
||||
@@ -61,39 +61,39 @@
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</bar>
|
||||
</view>
|
||||
<view class='grid col-5 padding-sm'>
|
||||
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}">
|
||||
<button class='round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
|
||||
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>块状按钮
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding flex flex-direction">
|
||||
<button class='bg-grey lg'>玄灰</button>
|
||||
<button class='bg-red margin-tb-sm lg'>嫣红</button>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="padding flex flex-direction">
|
||||
<button class='cu-btn bg-grey lg'>玄灰</button>
|
||||
<button class='cu-btn bg-red margin-tb-sm lg'>嫣红</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>无效状态
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<button class='block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
|
||||
<button class='block line-blue margin-tb-sm lg' disabled>无效状态</button>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class="padding">
|
||||
<button class='cu-btn block bg-blue margin-tb-sm lg' disabled type=''>无效状态</button>
|
||||
<button class='cu-btn block line-blue margin-tb-sm lg' disabled>无效状态</button>
|
||||
</view>
|
||||
<view class="cu-bar margin-top ">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-blue'></text>按钮加图标
|
||||
</view>
|
||||
</bar>
|
||||
</view>
|
||||
<view class="padding-xl">
|
||||
<button class='block line-orange lg'>
|
||||
<button class='cu-btn block line-orange lg'>
|
||||
<text class='icon-upload'></text> 图标</button>
|
||||
<button class='block bg-blue margin-tb-sm lg'>
|
||||
<button class='cu-btn block bg-blue margin-tb-sm lg'>
|
||||
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
|
||||
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
|
||||
<button class='cu-btn block bg-black margin-tb-sm lg' loading> 微信加载</button>
|
||||
</view>
|
||||
@@ -1,26 +1,26 @@
|
||||
<custom style="height:{{CustomBar}}px;">
|
||||
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<text class='icon-back'></text> 按钮 / 设计
|
||||
</navigator>
|
||||
</bar>
|
||||
</custom>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding-xl">
|
||||
<view class="box bg-white text-center radius {{block?'flex-direction':''}}">
|
||||
<button class='{{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}'>我是一个按钮</button>
|
||||
<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="<text wx:if="{{color}}">{{border?"line":"bg"}}{{bordersize?bordersize:""}}-{{color}} {{round?"round":""}} {{size}} {{shadow?"shadow":""}} {{block?"block":""}}</text>" </view>
|
||||
</view>
|
||||
|
||||
<form-group class="margin-top" bindtap="showModal" data-target="ColorModal">
|
||||
<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>
|
||||
</form-group>
|
||||
<form-group>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>是否圆角</view>
|
||||
<switch class='sm' bindchange='SetRound'></switch>
|
||||
</form-group>
|
||||
<form-group>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>选择尺寸</view>
|
||||
<radio-group bindchange='SetSize'>
|
||||
<label class='margin-left-sm'>
|
||||
@@ -36,16 +36,16 @@
|
||||
<text> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</form-group>
|
||||
<form-group>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>是否添加阴影</view>
|
||||
<switch class='sm' bindchange='SetShadow'></switch>
|
||||
</form-group>
|
||||
<form-group>
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<view class='title'>是否镂空</view>
|
||||
<switch class='sm' bindchange='SetBorder'></switch>
|
||||
</form-group>
|
||||
<form-group wx:if="{{border}}">
|
||||
</view>
|
||||
<view class="cu-form-group" wx:if="{{border}}">
|
||||
<view class='title'>边框大小</view>
|
||||
<radio-group bindchange='SetBorderSize'>
|
||||
<label class='margin-left-sm'>
|
||||
@@ -57,25 +57,25 @@
|
||||
<text> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</form-group>
|
||||
</view>
|
||||
|
||||
<!-- <form-group>
|
||||
<!-- <view class="cu-form-group">
|
||||
<view class='title'>定义为块元素</view>
|
||||
<switch class='sm' bindchange='SetBlock'></switch>
|
||||
</form-group> -->
|
||||
</view> -->
|
||||
|
||||
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
|
||||
<dialog>
|
||||
<bar class="justify-end">
|
||||
<view class="cu-modal {{modalName=='ColorModal'?'show':''}}">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar justify-end">
|
||||
<view class='content'>选择颜色</view>
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<text class='icon-close text-red'></text>
|
||||
</view>
|
||||
</bar>
|
||||
</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>
|
||||
</dialog>
|
||||
</modal-box>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user