mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-14 03:54:00 +08:00
v2.0.2
v2.0.2 2.0版本上线
This commit is contained in:
Weilanwl
18
demo/pages/basics/button/button.js
Normal file
18
demo/pages/basics/button/button.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
},
|
||||
SetShadow(e) {
|
||||
this.setData({
|
||||
shadow: e.detail.value
|
||||
})
|
||||
},
|
||||
SetBorderSize(e) {
|
||||
this.setData({
|
||||
bordersize: e.detail.value
|
||||
})
|
||||
},
|
||||
});
|
||||
1
demo/pages/basics/button/button.json
Normal file
1
demo/pages/basics/button/button.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
99
demo/pages/basics/button/button.wxml
Normal file
99
demo/pages/basics/button/button.wxml
Normal file
@@ -0,0 +1,99 @@
|
||||
<custom style="height:{{CustomBar}}px;">
|
||||
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<icon class='icon-back' /> 按钮
|
||||
</navigator>
|
||||
<navigator class='action' url='design' hover-class="none">
|
||||
<icon class='icon-skinfill' />
|
||||
<text class="text-df">设计</text>
|
||||
</navigator>
|
||||
</bar>
|
||||
</custom>
|
||||
<bar>
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />按钮形状
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding flex flex-wrap justify-between align-center">
|
||||
<button>默认</button>
|
||||
<button class='round'>圆角</button>
|
||||
<button class='icon'>
|
||||
<icon class='icon-emojifill' />
|
||||
</button>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />按钮尺寸
|
||||
</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='action'>
|
||||
<icon class='icon-title text-blue' />按钮颜色
|
||||
</view>
|
||||
<view class='action'>
|
||||
<text class='text-df'>阴影</text>
|
||||
<switch class='sm' bindchange='SetShadow'></switch>
|
||||
</view>
|
||||
</bar>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />镂空按钮
|
||||
</view>
|
||||
<view class='action'>
|
||||
<radio-group bindchange='SetBorderSize'>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='' checked/>
|
||||
<text> 小</text>
|
||||
</label>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='s' />
|
||||
<text> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</bar>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top ">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />块状按钮
|
||||
</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='action'>
|
||||
<icon class='icon-title text-blue' />无效状态
|
||||
</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='action'>
|
||||
<icon class='icon-title text-blue' />按钮加图标
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding-xl">
|
||||
<button class='block line-orange lg'>
|
||||
<icon class='icon-upload' /> 图标</button>
|
||||
<button class='block bg-blue margin-tb-sm lg'>
|
||||
<icon class='icon-loading2 iconfont-spin' /> 加载</button>
|
||||
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
|
||||
</view>
|
||||
1
demo/pages/basics/button/button.wxss
Normal file
1
demo/pages/basics/button/button.wxss
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
59
demo/pages/basics/button/design.js
Normal file
59
demo/pages/basics/button/design.js
Normal file
@@ -0,0 +1,59 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
SetRound (e) {
|
||||
this.setData({
|
||||
round: e.detail.value
|
||||
})
|
||||
},
|
||||
SetSize(e) {
|
||||
this.setData({
|
||||
size: e.detail.value
|
||||
})
|
||||
},
|
||||
SetColor(e) {
|
||||
this.setData({
|
||||
color: e.currentTarget.dataset.color,
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
SetShadow(e) {
|
||||
this.setData({
|
||||
shadow: e.detail.value
|
||||
})
|
||||
},
|
||||
SetBorder(e){
|
||||
this.setData({
|
||||
border: e.detail.value
|
||||
})
|
||||
if (!e.detail.value){
|
||||
this.setData({
|
||||
bordersize: false
|
||||
})
|
||||
}
|
||||
},
|
||||
SetBorderSize(e) {
|
||||
this.setData({
|
||||
bordersize: e.detail.value
|
||||
})
|
||||
},
|
||||
SetBlock(e) {
|
||||
this.setData({
|
||||
block: e.detail.value
|
||||
})
|
||||
},
|
||||
});
|
||||
1
demo/pages/basics/button/design.json
Normal file
1
demo/pages/basics/button/design.json
Normal file
@@ -0,0 +1 @@
|
||||
{}
|
||||
81
demo/pages/basics/button/design.wxml
Normal file
81
demo/pages/basics/button/design.wxml
Normal file
@@ -0,0 +1,81 @@
|
||||
<custom style="height:{{CustomBar}}px;">
|
||||
<bar class="fixed gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
|
||||
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
|
||||
<icon class='icon-back' /> 按钮 / 设计
|
||||
</navigator>
|
||||
</bar>
|
||||
</custom>
|
||||
<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>
|
||||
</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='title'>选择颜色</view>
|
||||
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
|
||||
</form-group>
|
||||
<form-group>
|
||||
<view class='title'>是否圆角</view>
|
||||
<switch class='sm' bindchange='SetRound'></switch>
|
||||
</form-group>
|
||||
<form-group>
|
||||
<view class='title'>选择尺寸</view>
|
||||
<radio-group bindchange='SetSize'>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='sm' />
|
||||
<text> 小</text>
|
||||
</label>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='' checked/>
|
||||
<text> 中</text>
|
||||
</label>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='lg' />
|
||||
<text> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</form-group>
|
||||
<form-group>
|
||||
<view class='title'>是否添加阴影</view>
|
||||
<switch class='sm' bindchange='SetShadow'></switch>
|
||||
</form-group>
|
||||
<form-group>
|
||||
<view class='title'>是否镂空</view>
|
||||
<switch class='sm' bindchange='SetBorder'></switch>
|
||||
</form-group>
|
||||
<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/>
|
||||
<text> 小</text>
|
||||
</label>
|
||||
<label class='margin-left-sm'>
|
||||
<radio class='blue sm radio' value='s' />
|
||||
<text> 大</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</form-group>
|
||||
|
||||
<!-- <form-group>
|
||||
<view class='title'>定义为块元素</view>
|
||||
<switch class='sm' bindchange='SetBlock'></switch>
|
||||
</form-group> -->
|
||||
|
||||
<modal-box class="{{modalName=='ColorModal'?'show':''}}">
|
||||
<dialog>
|
||||
<bar class="justify-end">
|
||||
<view class='content'>选择颜色</view>
|
||||
<view class='action' bindtap='hideModal'>
|
||||
<icon class='icon-close text-red'></icon>
|
||||
</view>
|
||||
</bar>
|
||||
<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>
|
||||
6
demo/pages/basics/button/design.wxss
Normal file
6
demo/pages/basics/button/design.wxss
Normal file
@@ -0,0 +1,6 @@
|
||||
.box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
}
|
||||
Reference in New Issue
Block a user