molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-03-13 11:34:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
demo/pages/basics/button/button.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
SetShadow(e) {
@@ -14,5 +12,5 @@ Page({
this.setData({
bordersize: e.detail.value
})
},
});
}
})

109
demo/pages/basics/button/button.wxml
View File

@@ -1,99 +1,96 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-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>
<navigator class='action' url='design' hover-class="none">
<text class='icon-skinfill'></text>
<text class="text-df">设计</text>
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">按钮</view>
</cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮形状
<view class="action">
<text class="icon-title text-blue"></text>按钮形状
</view>
<navigator class="action" url="design" hover-class="none">
<text class="icon-skinfill"></text>
<text class="text-df">设计</text>
</navigator>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn'>默认</button>
<button class='cu-btn round'>圆角</button>
<button class='cu-btn icon'>
<text class='icon-emojifill'></text>
<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<button class="cu-btn icon">
<text class="icon-emojifill"></text>
</button>
</view>
<view class="cu-bar margin-top bg-white solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>按钮尺寸
<view class="action">
<text class="icon-title text-blue"></text>按钮尺寸
</view>
</view>
<view class="padding flex flex-wrap justify-between align-center bg-white">
<button class='cu-btn round sm'>小尺寸</button>
<button class='cu-btn round'>默认</button>
<button class='cu-btn round lg'>大尺寸</button>
<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 bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮颜色
<view class="action">
<text class="icon-title text-blue"></text>按钮颜色
</view>
<view class='action'>
<text class='text-df margin-right-sm'>阴影</text>
<switch class='sm' bindchange='SetShadow'></switch>
<view class="action">
<text class="text-df margin-right-sm">阴影</text>
<switch class="sm" bindchange="SetShadow"></switch>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round bg-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round bg-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>镂空按钮
<view class="action">
<text class="icon-title text-blue"></text>镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked></radio>
<view class="action">
<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>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
</view>
<view class='grid col-5 padding-sm'>
<view class='margin-tb-sm text-center' wx:for="{{ColorList}}" wx:key>
<button class='cu-btn round line{{bordersize?bordersize:""}}-{{item.name}} {{shadow?"shadow":""}}'>{{item.title}}</button>
<view class="grid col-5 padding-sm">
<view class="margin-tb-sm text-center" wx:for="{{ColorList}}" wx:key>
<button class="cu-btn round line{{bordersize?bordersize:''}}-{{item.name}} {{shadow?'shadow':''}}">{{item.title}}</button>
</view>
</view>
<view class="cu-bar margin-top bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>块状按钮
<view class="action">
<text class="icon-title text-blue"></text>块状按钮
</view>
</view>
<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>
<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 bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>无效状态
<view class="action">
<text class="icon-title text-blue"></text>无效状态
</view>
</view>
<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>
<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 bg-white">
<view class='action'>
<text class='icon-title text-blue'></text>按钮加图标
<view class="action">
<text class="icon-title text-blue"></text>按钮加图标
</view>
</view>
<view class="padding-xl">
<button class='cu-btn block line-orange lg'>
<text class='icon-upload'></text> 图标</button>
<button class='cu-btn block bg-blue margin-tb-sm lg'>
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
<button class='cu-btn block bg-black margin-tb-sm lg' loading> 微信加载</button>
<button class="cu-btn block line-orange lg">
<text class="icon-upload"></text> 图标</button>
<button class="cu-btn block bg-blue margin-tb-sm lg">
<text class="icon-loading2 iconfont-spin"></text> 加载</button>
<button class="cu-btn block bg-black margin-tb-sm lg" loading> 微信加载</button>
</view>

6
demo/pages/basics/button/design.js
View File

@@ -1,8 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
showModal(e) {
@@ -55,5 +53,5 @@ Page({
this.setData({
block: e.detail.value
})
},
});
}
})

77
demo/pages/basics/button/design.wxml
View File

@@ -1,80 +1,67 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-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>
</view>
</view>
<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>
<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 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 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 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>
<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>
<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>
<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 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 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>
<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>
<label class="margin-left-sm">
<radio class="blue sm radio" value="s"></radio>
<text> 大</text>
</label>
</radio-group>
</view>
<!-- <view class="cu-form-group">
<view class='title'>定义为块元素</view>
<switch class='sm' bindchange='SetBlock'></switch>
</view> -->
<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 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 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>

2
demo/pages/basics/button/design.wxss
View File

@@ -2,5 +2,5 @@
display: flex;
align-items: center;
justify-content: center;
height: 100px;
height: 200rpx;
}