mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-06-08 06:53:17 +08:00
v2.0.2
v2.0.2 2.0版本上线
This commit is contained in:
Weilanwl
@@ -0,0 +1,14 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
},
|
||||
onLoad: function() {},
|
||||
pageBack() {
|
||||
wx.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,72 @@
|
||||
<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>
|
||||
<bar>
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />头像形状
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
|
||||
<avatar class="radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />头像尺寸
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<avatar class="sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
|
||||
<avatar class="round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
|
||||
<avatar class="lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
|
||||
<avatar class="xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></avatar>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />内嵌文字(图标)
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<avatar class="radius">
|
||||
<icon class='icon-people' />
|
||||
</avatar>
|
||||
<avatar class="radius margin-left">
|
||||
<text>港</text>
|
||||
</avatar>
|
||||
</view>
|
||||
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />头像颜色
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding-sm">
|
||||
<avatar class="round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
|
||||
<text>{{item.name}}</text>
|
||||
</avatar>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />头像组
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding'>
|
||||
<avatar-group>
|
||||
<avatar class="round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></avatar>
|
||||
</avatar-group>
|
||||
</view>
|
||||
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />头像标签
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding'>
|
||||
<avatar class="round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
|
||||
<tag class="badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></tag>
|
||||
</avatar>
|
||||
</view>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/basics/avatar/avatar.wxss */
|
||||
@@ -0,0 +1,11 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
|
||||
},
|
||||
onLoad: function() {},
|
||||
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,130 @@
|
||||
<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>
|
||||
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />深色背景
|
||||
</view>
|
||||
</bar>
|
||||
<view class='grid col-3 padding-sm'>
|
||||
<view class='padding-sm' wx:for="{{ColorList}}" wx:key>
|
||||
<view class='bg-{{item.name}} padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">{{item.title}}</view>
|
||||
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />淡色背景
|
||||
</view>
|
||||
</bar>
|
||||
<view class='grid col-3 bg-white padding-sm'>
|
||||
<view class='padding-sm' wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
|
||||
<view class='bg-{{item.name}} padding radius text-center light'>
|
||||
<view class="text-lg">{{item.title}}</view>
|
||||
<view class='margin-top-sm text-Abc'>{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />渐变背景
|
||||
</view>
|
||||
</bar>
|
||||
<view class='grid col-2 padding-sm'>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-red padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">魅红</view>
|
||||
<view class='margin-top-sm text-Abc'>#f43f3b - #ec008c</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-orange padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">鎏金</view>
|
||||
<view class='margin-top-sm text-Abc'>#ff9700 - #ed1c24</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-green padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">翠柳</view>
|
||||
<view class='margin-top-sm text-Abc'>#39b54a - #8dc63f</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-blue padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">靛青</view>
|
||||
<view class='margin-top-sm text-Abc'>#0081ff - #1cbbb4</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-purple padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">惑紫</view>
|
||||
<view class='margin-top-sm text-Abc'>#9000ff - #5e00ff</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class='gradual-pink padding radius text-center shadow-blur'>
|
||||
<view class="text-lg">霞彩</view>
|
||||
<view class='margin-top-sm text-Abc'>#ec008c - #6739b6</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />图片背景
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-img bg-mask padding-tb-xl" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg')">
|
||||
<view class='padding-xl text-white'>
|
||||
<view class='padding-xs text-xl'>
|
||||
我和春天有个约会
|
||||
</view>
|
||||
<view class='padding-xs'>
|
||||
I Have a Date with Spring
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />视频背景
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-video bg-mask">
|
||||
<video src='https://www.weilanwl.com/theme/wl/assets/images/slider1.mp4' autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"></video>
|
||||
<cover-view class='padding-xl text-white'>
|
||||
<cover-view class='padding-xs text-xl'>
|
||||
开源是创新的动力之源
|
||||
</cover-view>
|
||||
<cover-view class='padding-xs'>
|
||||
Open Source is the Power Source of Innovation
|
||||
</cover-view>
|
||||
</cover-view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />透明背景(文字层)
|
||||
</view>
|
||||
</bar>
|
||||
<view class='grid col-2 padding-sm'>
|
||||
<view class='padding-sm'>
|
||||
<view class="bg-img padding-bottom-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
|
||||
<view class='bg-shadeTop padding padding-bottom-xl'>
|
||||
上面开始
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-sm'>
|
||||
<view class="bg-img padding-top-xl" style="background-image: url('https://image.weilanwl.com/img/square-3.jpg')">
|
||||
<view class='bg-shadeBottom padding padding-top-xl '>
|
||||
下面开始
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -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
|
||||
})
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -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>
|
||||
@@ -0,0 +1 @@
|
||||
|
||||
@@ -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
|
||||
})
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,6 @@
|
||||
.box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
},
|
||||
onLoad: function() {
|
||||
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,61 @@
|
||||
<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>
|
||||
<view class='action'>
|
||||
|
||||
</view>
|
||||
</bar>
|
||||
</custom>
|
||||
<view class='text-center'>
|
||||
<view class="padding-xl ">
|
||||
<checkbox class=''></checkbox>
|
||||
<radio-group>
|
||||
<radio class='' checked name="sex" />
|
||||
<radio class='blue sm' name="sex" />
|
||||
</radio-group>
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='' />
|
||||
<radio-group>
|
||||
<radio class='red radio' checked name="sex" />
|
||||
<radio class='blue radio' name="sex" />
|
||||
</radio-group>
|
||||
<checkbox class='blue'></checkbox>
|
||||
<checkbox class='cyan round'></checkbox>
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class=' sm' />
|
||||
<radio-group>
|
||||
<radio class='red radio sm' checked name="sex" />
|
||||
<radio class='blue radio sm' name="sex" />
|
||||
</radio-group>
|
||||
<checkbox class='red sm'></checkbox>
|
||||
<checkbox class='cyan round sm'></checkbox>
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='switch-sex' checked/>
|
||||
<switch class='switch-sex sm' />
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='red' checked/>
|
||||
<switch class='blue sm' checked/>
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='' checked/>
|
||||
<switch class=' sm' checked/>
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='' />
|
||||
<switch class=' sm' />
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='orange sm radius' />
|
||||
<switch class='yellow radius' />
|
||||
</view>
|
||||
<view class="padding-xl ">
|
||||
<switch class='blue radius' />
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,23 @@
|
||||
Page({
|
||||
data: {
|
||||
elements: [
|
||||
{ title: '布局', name: 'layout', color: 'cyan', icon: 'newsfill' },
|
||||
{ title: '背景', name: 'background', color: 'blue', icon: 'colorlens' },
|
||||
{ title: '文本', name: 'text', color: 'purple', icon: 'font' },
|
||||
{ title: '图标 ', name: 'icon', color: 'mauve', icon: 'icon' },
|
||||
{ title: '按钮', name: 'button', color: 'pink', icon: 'btn' },
|
||||
{ title: '标签', name: 'tag', color: 'brown', icon: 'tagfill' },
|
||||
{ title: '头像', name: 'avatar', color: 'red', icon: 'myfill' },
|
||||
{ title: '进度条', name: 'progress', color: 'orange', icon: 'icloading' },
|
||||
{ title: '边框阴影', name: 'shadow', color: 'olive', icon: 'copy' },
|
||||
{ title: '加载', name: 'loading', color: 'green', icon: 'loading2' },
|
||||
],
|
||||
},
|
||||
onShareAppMessage(){
|
||||
return {
|
||||
title: 'ColorUI-高颜值的小程序UI组件库',
|
||||
imageUrl:'https://image.weilanwl.com/color2.0/share2215.jpg',
|
||||
path: '/pages/basics/home/home'
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,8 @@
|
||||
<image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
|
||||
<view class='nav-list'>
|
||||
<navigator open-type="navigate" hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" wx:for="{{elements}}" wx:key>
|
||||
<view class="nav-title">{{item.title}}</view>
|
||||
<view class="nav-name">{{item.name}}</view>
|
||||
<icon class='icon-{{item.icon}}'/>
|
||||
</navigator>
|
||||
</view>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,22 @@
|
||||
<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>
|
||||
<view class='action'>
|
||||
|
||||
</view>
|
||||
</bar>
|
||||
</custom>
|
||||
<bar class="search fixed" style="top:{{CustomBar}}px">
|
||||
<view class='serach-form round'>
|
||||
<icon class="icon-search"/>
|
||||
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'/>
|
||||
</view>
|
||||
</bar>
|
||||
<list class="grid col-3">
|
||||
<item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
|
||||
<icon class='icon-{{item.name}} lg text-gray'/>
|
||||
<text>{{item.name}}</text>
|
||||
</item>
|
||||
</list>
|
||||
@@ -0,0 +1,6 @@
|
||||
page{
|
||||
padding-top: 50px;
|
||||
}
|
||||
item.none{
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
},
|
||||
onLoad: function() {
|
||||
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,14 @@
|
||||
<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>
|
||||
<view class='action'>
|
||||
|
||||
</view>
|
||||
</bar>
|
||||
</custom>
|
||||
|
||||
<image class="" src="https://image.weilanwl.com/img/square-4.jpg" mode="widthFix" lazy-load="true" binderror="" bindload=""></image>
|
||||
<view><text>好</text></view>
|
||||
@@ -0,0 +1,19 @@
|
||||
/* view {
|
||||
background: RED;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 100px;
|
||||
border-top-left-radius: 38.2% 61.8%;
|
||||
border-top-right-radius: 61.8% 38.2%;
|
||||
border-bottom-right-radius: 38.2% 61.8%;
|
||||
border-bottom-left-radius: 61.8% 38.2%;
|
||||
transform: rotate(-20deg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
}
|
||||
view text{
|
||||
transform: rotate(20deg);
|
||||
} */
|
||||
@@ -0,0 +1,16 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
TabCur:0,
|
||||
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
|
||||
},
|
||||
tabSelect(e) {
|
||||
console.log(e);
|
||||
this.setData({
|
||||
TabCur: e.currentTarget.dataset.id,
|
||||
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,185 @@
|
||||
<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>
|
||||
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
|
||||
<item class="{{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
|
||||
{{tabNav[index]}}
|
||||
</item>
|
||||
</scroll-view>
|
||||
<block wx:if="{{TabCur==0}}">
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />固定尺寸
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<view class="flex flex-wrap">
|
||||
<view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
|
||||
<view class='basis-df'></view>
|
||||
<view class='basis-sm bg-grey margin-xs padding-sm radius'>sm(40%)</view>
|
||||
<view class='basis-df'></view>
|
||||
<view class='basis-df bg-grey margin-xs padding-sm radius'>sub(50%)</view>
|
||||
<view class='basis-lg bg-grey margin-xs padding-sm radius'>lg(60%)</view>
|
||||
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />比例布局
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<view class="flex">
|
||||
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
|
||||
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
|
||||
</view>
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
|
||||
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
|
||||
</view>
|
||||
<view class="flex p-xs margin-bottom-sm mb-sm">
|
||||
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
|
||||
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
|
||||
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />水平对齐(justify)
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-white">
|
||||
<view class="flex solid-bottom padding justify-start">
|
||||
<view class='bg-grey padding-sm margin-xs radius'>start</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-end">
|
||||
<view class='bg-grey padding-sm margin-xs radius'>end</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-center">
|
||||
<view class='bg-grey padding-sm margin-xs radius'>center</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>center</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-between">
|
||||
<view class='bg-grey padding-sm margin-xs radius'>between</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>between</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding justify-around">
|
||||
<view class='bg-grey padding-sm margin-xs radius'>around</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>around</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />垂直对齐(align)
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-white">
|
||||
<view class="flex solid-bottom padding align-start">
|
||||
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>start</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-end">
|
||||
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>end</view>
|
||||
</view>
|
||||
<view class="flex solid-bottom padding align-center">
|
||||
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
|
||||
<view class='bg-grey padding-sm margin-xs radius'>center</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{TabCur==1}}">
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />等分列
|
||||
</view>
|
||||
<view class='action'></view>
|
||||
</bar>
|
||||
<view class="bg-white padding">
|
||||
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
|
||||
<view class="{{index%2==0?'bg-cyan':'bg-blue'}} padding" wx:for="{{(index+1)*2}}" wx:key>{{index+1}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />等高
|
||||
</view>
|
||||
<view class='action'></view>
|
||||
</bar>
|
||||
<view class="bg-white padding">
|
||||
<view class="grid col-4 grid-square">
|
||||
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{TabCur==2}}">
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />浮动
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-white padding">
|
||||
<view class=" cf padding-sm">
|
||||
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
|
||||
<view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:if="{{TabCur==3}}">
|
||||
<bar class="margin-top solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />内外边距
|
||||
</view>
|
||||
</bar>
|
||||
<view class="bg-white">
|
||||
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">内边距</view>
|
||||
<view class="basis-df">.margin-{size}</view>
|
||||
<view class="basis-df">.padding-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
|
||||
<view class="basis-df">.margin-lr-{size}</view>
|
||||
<view class="basis-df">.padding-lr-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
|
||||
<view class="basis-df">.margin-tb-{size}</view>
|
||||
<view class="basis-df">.padding-tb-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">上外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">上内边距</view>
|
||||
<view class="basis-df">.margin-top-{size}</view>
|
||||
<view class="basis-df">.padding-top-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">右外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">右内边距</view>
|
||||
<view class="basis-df">.margin-right-{size}</view>
|
||||
<view class="basis-df">.padding-right-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">下外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">下内边距</view>
|
||||
<view class="basis-df">margin-bottom-{size}</view>
|
||||
<view class="basis-df">.padding-bottom-{size}</view>
|
||||
</view>
|
||||
<view class='flex flex-wrap padding solid-top'>
|
||||
<view class="basis-df padding-bottom-xs">左外边距</view>
|
||||
<view class="basis-df padding-bottom-xs">左内边距</view>
|
||||
<view class="basis-df">.margin-left-{size}</view>
|
||||
<view class="basis-df">.padding-left-{size}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -0,0 +1,3 @@
|
||||
page{
|
||||
padding-top: 45px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
},
|
||||
isLoading (e) {
|
||||
this.setData({
|
||||
isLoad: e.detail.value
|
||||
})
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,31 @@
|
||||
<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>
|
||||
<view class='action'>
|
||||
<load class="load-icon {{!isLoad?'loading':'over'}}"></load>
|
||||
</view>
|
||||
</bar>
|
||||
</custom>
|
||||
<bar>
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>背景
|
||||
</view>
|
||||
</bar>
|
||||
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>加载状态
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='sm' bindchange='isLoading'></switch>
|
||||
</view>
|
||||
</bar>
|
||||
<load class="bg-grey {{!isLoad?'loading':'over'}}"></load>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>加载错误
|
||||
</view>
|
||||
</bar>
|
||||
<load class="bg-red erro"></load>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/basics/load/load.wxss */
|
||||
@@ -0,0 +1,38 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
color:'red',
|
||||
},
|
||||
onLoad() {
|
||||
let that = this;
|
||||
setTimeout(function() {
|
||||
that.setData({
|
||||
loading: true
|
||||
})
|
||||
}, 500)
|
||||
},
|
||||
showModal(e) {
|
||||
this.setData({
|
||||
modalName: e.currentTarget.dataset.target
|
||||
})
|
||||
},
|
||||
hideModal(e) {
|
||||
this.setData({
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
SetColor(e) {
|
||||
this.setData({
|
||||
color: e.currentTarget.dataset.color,
|
||||
modalName: null
|
||||
})
|
||||
},
|
||||
SetActive(e) {
|
||||
this.setData({
|
||||
active: e.detail.value
|
||||
})
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,116 @@
|
||||
<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>
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条形状
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<progress-bar>
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
|
||||
</progress-bar>
|
||||
<progress-bar class="radius margin-top">
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
|
||||
</progress-bar>
|
||||
<progress-bar class="round margin-top">
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
|
||||
</progress-bar>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条尺寸
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<progress-bar class="round">
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
|
||||
</progress-bar>
|
||||
<progress-bar class="round margin-top sm">
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
|
||||
</progress-bar>
|
||||
<progress-bar class="round margin-top xs">
|
||||
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
|
||||
</progress-bar>
|
||||
</view>
|
||||
|
||||
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条颜色
|
||||
</view>
|
||||
<view class='action'>
|
||||
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
|
||||
<progress-bar class="round">
|
||||
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
|
||||
</progress-bar>
|
||||
</view>
|
||||
|
||||
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条条纹
|
||||
</view>
|
||||
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<progress-bar class="round sm striped {{active?'active':''}}">
|
||||
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
|
||||
</progress-bar>
|
||||
<progress-bar class="round sm margin-top-sm striped {{active?'active':''}}">
|
||||
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
|
||||
</progress-bar>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条比例
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white">
|
||||
<progress-bar class="radius striped active">
|
||||
<view class='bg-red' style="width:{{loading?'30%':''}};">30%</view>
|
||||
<view class='bg-olive' style="width:{{loading?'45%':''}};">45%</view>
|
||||
<view class='bg-cyan' style="width:{{loading?'25%':''}};">25%</view>
|
||||
</progress-bar>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />进度条布局
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding bg-white ">
|
||||
<view class='flex'>
|
||||
<progress-bar class="round">
|
||||
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
|
||||
</progress-bar>
|
||||
<icon class='icon-roundcheckfill text-green margin-left-sm' />
|
||||
</view>
|
||||
<view class='flex margin-top'>
|
||||
<progress-bar class="round">
|
||||
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
|
||||
</progress-bar>
|
||||
<text class='margin-left'>80%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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}}' wx:if="{{item.name!='gray'}}">
|
||||
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
|
||||
</view>
|
||||
</view>
|
||||
</dialog>
|
||||
</modal-box>
|
||||
@@ -0,0 +1,12 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar
|
||||
},
|
||||
SetSize(e) {
|
||||
this.setData({
|
||||
size: e.detail.value
|
||||
})
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,34 @@
|
||||
<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>
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />边框
|
||||
</view>
|
||||
<view class='action'>
|
||||
<switch class='sm' bindchange='SetSize'></switch>
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding bg-white text-center'>
|
||||
<view class='padding solid{{size?"s":""}}'>四周</view>
|
||||
<view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
|
||||
<view class='padding solid{{size?"s":""}}-right margin-top'>右</view>
|
||||
<view class='padding solid{{size?"s":""}}-bottom margin-top'>下</view>
|
||||
<view class='padding solid{{size?"s":""}}-left margin-top'>左</view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />阴影
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding text-center">
|
||||
<view class="padding-xl radius shadow bg-white"> 默认阴影</view>
|
||||
<view class="padding-xl radius shadow-lg bg-white margin-top">长阴影</view>
|
||||
<view class="padding-xl radius shadow-warp bg-white margin-top">翘边阴影</view>
|
||||
<view class="padding-xl radius shadow-blur bg-red margin-top">根据背景颜色而改变的阴影</view>
|
||||
<view class="padding-xl radius shadow-blur bg-red margin-top bg-img" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"><view>根据背景颜色而改变的阴影</view></view>
|
||||
</view>
|
||||
@@ -0,0 +1,11 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
ColorList: app.globalData.ColorList,
|
||||
},
|
||||
onLoad: function() {
|
||||
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,119 @@
|
||||
<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>
|
||||
|
||||
<bar>
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />标签形状
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<tag>默认</tag>
|
||||
<tag class='round'>椭圆</tag>
|
||||
<tag class='radius'>圆角</tag>
|
||||
</view>
|
||||
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />标签尺寸
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<tag class='radius sm'>小尺寸</tag>
|
||||
<tag class='radius'>普通尺寸</tag>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />标签颜色
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding-sm flex flex-wrap'>
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
|
||||
<tag class='bg-{{item.name}}'>{{item.title}}</tag>
|
||||
</view>
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
|
||||
<tag class='bg-{{item.name}} light'>{{item.title}}</tag>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />镂空标签
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding-sm flex flex-wrap'>
|
||||
<view class="padding-xs" wx:for="{{ColorList}}" wx:key>
|
||||
<tag class='line-{{item.name}}'>{{item.title}}</tag>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />胶囊样式
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding">
|
||||
<capsule>
|
||||
<tag class='bg-red'>
|
||||
<icon class='icon-likefill' />
|
||||
</tag>
|
||||
<tag class="line-red">
|
||||
12
|
||||
</tag>
|
||||
</capsule>
|
||||
<capsule class="round">
|
||||
<tag class='bg-blue '>
|
||||
<icon class='icon-likefill' />
|
||||
</tag>
|
||||
<tag class="line-blue">
|
||||
23
|
||||
</tag>
|
||||
</capsule>
|
||||
<capsule class="round">
|
||||
<tag class='bg-blue '>
|
||||
说明
|
||||
</tag>
|
||||
<tag class="line-blue">
|
||||
123
|
||||
</tag>
|
||||
</capsule>
|
||||
<capsule class="radius">
|
||||
<tag class='bg-grey '>
|
||||
<icon class='icon-likefill' />
|
||||
</tag>
|
||||
<tag class="line-grey">
|
||||
23
|
||||
</tag>
|
||||
</capsule>
|
||||
<capsule class="radius">
|
||||
<tag class='bg-brown sm'>
|
||||
<icon class='icon-likefill' />
|
||||
</tag>
|
||||
<tag class="line-brown sm">
|
||||
23
|
||||
</tag>
|
||||
</capsule>
|
||||
</view>
|
||||
<bar class="margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue' />数字标签
|
||||
</view>
|
||||
</bar>
|
||||
<view class="padding flex justify-between align-center">
|
||||
<avatar class='xl radius'>
|
||||
港
|
||||
<tag class="badge">99+</tag>
|
||||
</avatar>
|
||||
<avatar class='xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
|
||||
<tag class='badge'>9</tag>
|
||||
</avatar>
|
||||
<avatar class='xl radius'>
|
||||
<tag class='badge'>99</tag>
|
||||
<icon class='icon-people' />
|
||||
</avatar>
|
||||
<avatar class='xl radius'>
|
||||
<tag class='badge'>99+</tag>
|
||||
</avatar>
|
||||
</view>
|
||||
@@ -0,0 +1,85 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
list: [{
|
||||
title: '嫣红',
|
||||
name: 'red',
|
||||
color: '#e54d42'
|
||||
},
|
||||
{
|
||||
title: '桔橙',
|
||||
name: 'orange',
|
||||
color: '#f37b1d'
|
||||
},
|
||||
{
|
||||
title: '明黄',
|
||||
name: 'yellow',
|
||||
color: '#fbbd08'
|
||||
},
|
||||
{
|
||||
title: '橄榄',
|
||||
name: 'olive',
|
||||
color: '#8dc63f'
|
||||
},
|
||||
{
|
||||
title: '森绿',
|
||||
name: 'green',
|
||||
color: '#39b54a'
|
||||
},
|
||||
{
|
||||
title: '天青',
|
||||
name: 'cyan',
|
||||
color: '#1cbbb4'
|
||||
},
|
||||
{
|
||||
title: '海蓝',
|
||||
name: 'blue',
|
||||
color: '#0081ff'
|
||||
},
|
||||
{
|
||||
title: '姹紫',
|
||||
name: 'purple',
|
||||
color: '#6739b6'
|
||||
},
|
||||
{
|
||||
title: '木槿',
|
||||
name: 'mauve',
|
||||
color: '#9c26b0'
|
||||
},
|
||||
{
|
||||
title: '桃粉',
|
||||
name: 'pink',
|
||||
color: '#e03997'
|
||||
},
|
||||
{
|
||||
title: '棕褐',
|
||||
name: 'brown',
|
||||
color: '#a5673f'
|
||||
},
|
||||
{
|
||||
title: '玄灰',
|
||||
name: 'grey',
|
||||
color: '#8799a3'
|
||||
},
|
||||
{
|
||||
title: '草灰',
|
||||
name: 'gray',
|
||||
color: '#aaaaaa'
|
||||
},
|
||||
{
|
||||
title: '墨黑',
|
||||
name: 'black',
|
||||
color: '#333333'
|
||||
},
|
||||
{
|
||||
title: '雅白',
|
||||
name: 'white',
|
||||
color: '#ffffff'
|
||||
},
|
||||
]
|
||||
},
|
||||
onLoad: function () { },
|
||||
|
||||
})
|
||||
@@ -0,0 +1 @@
|
||||
{}
|
||||
@@ -0,0 +1,148 @@
|
||||
<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>
|
||||
<view class='action'>
|
||||
|
||||
</view>
|
||||
</bar>
|
||||
</custom>
|
||||
<bar class="solid-bottom">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>文字大小
|
||||
</view>
|
||||
</bar>
|
||||
<view class='bg-white padding-lr'>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>60</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xsl padding'>
|
||||
<icon class=' icon-roundcheckfill text-green'/>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等特大显示</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>40</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-sl padding'>
|
||||
<icon class=' icon-roundcheckfill text-green'/>
|
||||
</view>
|
||||
<view class='padding'>用于图标、数字等较大显示</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>22</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xxl padding'>
|
||||
<text class='text-price text-red'>80.00</text>
|
||||
</view>
|
||||
<view class='padding'>用于金额数字等信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>18</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xl padding'>
|
||||
<text class='text-black text-bold'>您的订单已提交成功！</text>
|
||||
</view>
|
||||
<view class='padding'>页面大标题，用于结果页等单一信息页</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>16</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-lg padding'>
|
||||
<text class='text-black'>ColorUI组件库</text>
|
||||
</view>
|
||||
<view class='padding'>页面小标题，首要层级显示内容</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>14</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-df padding'>专注视觉的小程序组件库</view>
|
||||
<view class='padding'>页面默认字号，用于摘要或阅读文本</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='solids-bottom padding-xs flex align-center'>
|
||||
<view class='padding'>12</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-sm padding'>
|
||||
<text class='text-grey'>衬衫的价格是9磅15便士</text>
|
||||
</view>
|
||||
<view class='padding'>页面辅助信息，次级内容等</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='padding-xs flex align-center'>
|
||||
<view class='padding'>10</view>
|
||||
<view class='flex-sub text-center'>
|
||||
<view class='solid-bottom text-xs padding'>
|
||||
<text class='text-gray'>我于杀戮之中绽放 亦如黎明中的花朵</text>
|
||||
</view>
|
||||
<view class='padding'>说明文本，标签文字等关注度低的文字</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>文字颜色
|
||||
</view>
|
||||
</bar>
|
||||
<view class='grid col-5 padding-sm'>
|
||||
<view class='padding-sm' wx:for="{{list}}" wx:key>
|
||||
<view class='text-{{item.name}} text-center'>
|
||||
{{item.title}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>文字截断
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding bg-white'>
|
||||
<view class='text-cut padding bg-grey radius' style='width:220px'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>文字对齐
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding bg-white'>
|
||||
<view class='text-left padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
<view class='text-center padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
<view class='text-right padding'>我于杀戮之中绽放 ,亦如黎明中的花朵</view>
|
||||
</view>
|
||||
<bar class="solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<icon class='icon-title text-blue'/>特殊文字
|
||||
</view>
|
||||
</bar>
|
||||
<view class='padding text-center'>
|
||||
<view class='padding-lr bg-white'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-price'>80.00</text>
|
||||
</view>
|
||||
<view class='padding'>价格文本，利用伪元素添加"¥"符号</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-Abc'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>英文单词首字母大写</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-ABC'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>全部字母大写</view>
|
||||
</view>
|
||||
<view class='padding-lr bg-white margin-top'>
|
||||
<view class='solid-bottom padding'>
|
||||
<text class='text-abc'>color Ui</text>
|
||||
</view>
|
||||
<view class='padding'>全部字母小写</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1 @@
|
||||
/* pages/basics/text/text.wxss */
|
||||
Reference in New Issue
Block a user