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

v2.0.4

Browse Source
This commit is contained in:
Weilanwl
2019-01-11 20:28:11 +08:00
parent ace94e4e87
commit 523eaba3c6
33 changed files with 6104 additions and 6124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
demo/pages/basics/avatar/avatar.wxml
View File

@@ -1,84 +1,84 @@
<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>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>头像形状
</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="padding">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar radius margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像尺寸
</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>
<view class="padding">
<avatar class="sm round margin-left bg-red" > orange</avatar>
<avatar class="round margin-left bg-red" >orange</avatar>
<avatar class="lg round margin-left bg-red" >orange</avatar>
<avatar class="xl round margin-left bg-red" >orange</avatar>
<view class="cu-avatar sm round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="cu-avatar round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="cu-avatar lg round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="cu-avatar xl round margin-left" style="background-image:url(https://image.weilanwl.com/img/square-4.jpg);"></view>
</view>
<view class="padding">
<avatar class="sm round margin-left bg-red" > 蔚蓝</avatar>
<avatar class="round margin-left bg-red" >蔚蓝</avatar>
<avatar class="lg round margin-left bg-red" >蔚蓝</avatar>
<avatar class="xl round margin-left bg-red" >蔚蓝</avatar>
<view class="cu-avatar sm round margin-left bg-red" > orange</view>
<view class="cu-avatar round margin-left bg-red" >orange</view>
<view class="cu-avatar lg round margin-left bg-red" >orange</view>
<view class="cu-avatar xl round margin-left bg-red" >orange</view>
</view>
<bar class="margin-top">
<view class="padding">
<view class="cu-avatar sm round margin-left bg-red" > 蔚蓝</view>
<view class="cu-avatar round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar lg round margin-left bg-red" >蔚蓝</view>
<view class="cu-avatar xl round margin-left bg-red" >蔚蓝</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>内嵌文字(图标)
</view>
</bar>
</view>
<view class="padding">
<avatar class="radius">
<view class="cu-avatar radius">
<text class='icon-people'></text>
</avatar>
<avatar class="radius margin-left">
</view>
<view class="cu-avatar radius margin-left">
<text>港</text>
</avatar>
</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-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="padding-sm">
<view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key>
<text>{{item.name}}</text>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>头像组
</view>
</bar>
</view>
<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 class="cu-avatar-group">
<view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
</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>
<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 class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);">
<view class="cu-tag badge {{index%2==0?'icon-female bg-pink':'icon-male bg-blue'}}"></view>
</view>
</view>

32
demo/pages/basics/background/background.wxml
View File

@@ -1,16 +1,16 @@
<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>
<bar class="solid-bottom">
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>深色背景
</view>
</bar>
</view>
<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'>
@@ -20,11 +20,11 @@
</view>
</view>
<bar class="solid-bottom">
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>淡色背景
</view>
</bar>
</view>
<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'>
@@ -33,11 +33,11 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>渐变背景
</view>
</bar>
</view>
<view class='grid col-2 padding-sm'>
<view class='padding-sm'>
<view class='gradual-red padding radius text-center shadow-blur'>
@@ -76,11 +76,11 @@
</view>
</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>
<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'>
@@ -91,11 +91,11 @@
</view>
</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>
<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'>
@@ -107,11 +107,11 @@
</cover-view>
</cover-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>
<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')">

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

@@ -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>

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

@@ -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>

8
demo/pages/basics/form/form.wxml
View File

@@ -1,11 +1,11 @@
<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='text-center'>
<view class="padding-xl ">
<checkbox class=''></checkbox>

20
demo/pages/basics/icon/icon.wxml
View File

@@ -1,19 +1,19 @@
<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>
<bar class="search fixed" style="top:{{CustomBar}}px">
</view>
</view>
<view class="cu-bar search fixed" style="top:{{CustomBar}}px">
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索icon" confirm-type="search" bindinput='searchIcon'></input>
</view>
</bar>
<list class="grid col-3">
<item wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
</view>
<view class="cu-list grid col-3">
<view class="cu-item" wx:for="{{icon}}" wx:key wx:if="{{item.isShow}}">
<text class='icon-{{item.name}} lg text-gray'></text>
<text>{{item.name}}</text>
</item>
</list>
</view>
</view>

8
demo/pages/basics/image/image.wxml
View File

@@ -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>
图片
@@ -7,8 +7,8 @@
<view class='action'>
</view>
</bar>
</custom>
</view>
</view>
<image class="" src="https://image.weilanwl.com/img/square-4.jpg" mode="widthFix" lazy-load="true" binderror="" bindload=""></image>
<view><text>好</text></view>

44
demo/pages/basics/layout/layout.wxml
View File

@@ -1,21 +1,21 @@
<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>
<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}}">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
</item>
</view>
</scroll-view>
<block wx:if="{{TabCur==0}}">
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
</view>
</bar>
</view>
<view class="padding bg-white">
<view class="flex flex-wrap">
<view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
@@ -27,11 +27,11 @@
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
</view>
</bar>
</view>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
@@ -47,11 +47,11 @@
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
</view>
</bar>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
@@ -74,11 +74,11 @@
<view class='bg-grey padding-sm margin-xs radius'>around</view>
</view>
</view>
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
</view>
</bar>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
@@ -95,23 +95,23 @@
</view>
</block>
<block wx:if="{{TabCur==1}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
</view>
<view class='action'></view>
</bar>
</view>
<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="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
</view>
<view class='action'></view>
</bar>
</view>
<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>
@@ -119,11 +119,11 @@
</view>
</block>
<block wx:if="{{TabCur==2}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
</view>
</bar>
</view>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
@@ -132,11 +132,11 @@
</view>
</block>
<block wx:if="{{TabCur==3}}">
<bar class="margin-top solid-bottom">
<view class="cu-bar margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
</view>
</bar>
</view>
<view class="bg-white">
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
<view class='flex flex-wrap padding solid-top'>

44
demo/pages/basics/loading/loading.wxml
View File

@@ -1,60 +1,60 @@
<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>
<view class='action'>
<load class="load-text {{!isLoad?'loading':'over'}}"></load>
<view class="cu-load load-icon {{!isLoad?'loading':'over'}}"></view>
</view>
</bar>
</custom>
<bar>
</view>
</view>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>背景
</view>
</bar>
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
</view>
<view class="cu-load bg-blue {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载状态
</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>
<view class="cu-load bg-grey {{!isLoad?'loading':'over'}}"></view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>加载错误
</view>
</bar>
<load class="bg-red erro"></load>
</view>
<view class="cu-load bg-red erro"></view>
<bar class="margin-top">
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>弹框加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadModal'>
<button class='cu-btn bg-green shadow' bindtap='loadModal'>
点我
</button>
</view>
</bar>
<load class='load-modal' wx:if="{{loadModal}}">
</view>
<view class='cu-load load-modal' wx:if="{{loadModal}}">
<!-- <view class='icon-emojifill text-orange'></view> -->
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<view class='gray-text'>加载中...</view>
</load>
<bar class="margin-top">
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadProgress'>
<button class='cu-btn bg-green shadow' bindtap='loadProgress'>
点我
</button>
</view>
</bar>
</view>
<view class='load-progress {{loadProgress!=0?"show":"hide"}}' style="top:{{CustomBar}}px;">
<view class='load-progress-bar bg-green' style="transform: translate3d(-{{100-loadProgress}}%, 0px, 0px);"></view>
<view class='load-progress-spinner text-green'></view>

106
demo/pages/basics/progress/progress.wxml
View File

@@ -1,116 +1,116 @@
<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>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>进度条形状
</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="padding bg-white">
<view class="cu-progress">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress radius margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
<view class="cu-progress round margin-top">
<view class='bg-red' style="width:{{loading?'61.8%':''}};">61.8%</view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条尺寸
</view>
</bar>
</view>
<view class="padding bg-white">
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top sm">
</view>
<view class="cu-progress round margin-top sm">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
<progress-bar class="round margin-top xs">
</view>
<view class="cu-progress round margin-top xs">
<view class='bg-red' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
</view>
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class="cu-bar solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<text class='icon-title text-blue'></text>进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
</view>
</bar>
</view>
<view class="padding {{color=='white'?'bg-grey':'bg-white'}}">
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-{{color}}' style="width:{{loading?'61.8%':''}};"></view>
</progress-bar>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条条纹
</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="padding bg-white">
<view class="cu-progress round sm striped {{active?'active':''}}">
<view class='bg-green' style="width:{{loading?'60%':''}};"></view>
</view>
<view class="cu-progress round sm margin-top-sm striped {{active?'active':''}}">
<view class='bg-black' style="width:{{loading?'40%':''}};"></view>
</view>
</view>
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条比例
</view>
</bar>
</view>
<view class="padding bg-white">
<progress-bar class="radius striped active">
<view class="cu-progress 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>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>进度条布局
</view>
</bar>
</view>
<view class="padding bg-white ">
<view class='flex'>
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
</progress-bar>
</view>
<text class='icon-roundcheckfill text-green margin-left-sm'></text>
</view>
<view class='flex margin-top'>
<progress-bar class="round">
<view class="cu-progress round">
<view class='bg-green' style="width:{{loading?'80%':''}};"></view>
</progress-bar>
</view>
<text class='margin-left'>80%</text>
</view>
</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}}' wx:if="{{item.name!='gray'}}">
<view class='padding-tb bg-{{item.name}} radius'> {{item.title}} </view>
</view>
</view>
</dialog>
</modal-box>
</view>
</view>

16
demo/pages/basics/shadow/shadow.wxml
View File

@@ -1,18 +1,18 @@
<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>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
</view>
</bar>
</view>
<view class='padding bg-white text-center'>
<view class='padding solid{{size?"s":""}}'>四周</view>
<view class='padding solid{{size?"s":""}}-top margin-top'>上</view>
@@ -20,11 +20,11 @@
<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="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>阴影
</view>
</bar>
</view>
<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>

156
demo/pages/basics/tag/tag.wxml
View File

@@ -1,119 +1,119 @@
<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>
<bar>
<view class="cu-bar">
<view class='action'>
<text class='icon-title text-blue'></text>标签形状
</view>
</bar>
</view>
<view class="padding">
<tag>默认</tag>
<tag class='round'>椭圆</tag>
<tag class='radius'>圆角</tag>
<view class='cu-tag'>默认</view>
<view class='cu-tag round'>椭圆</view>
<view class='cu-tag radius'>圆角</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">
<tag class='radius sm'>小尺寸</tag>
<tag class='radius'>普通尺寸</tag>
</view>
<bar class="margin-top">
<view class="padding">
<view class='cu-tag radius sm'>小尺寸</view>
<view class='cu-tag radius'>普通尺寸</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>标签颜色
</view>
</bar>
</view>
<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 class='cu-tag bg-{{item.name}}'>{{item.title}}</view>
</view>
<view class="padding-xs" wx:for="{{ColorList}}" wx:key wx:if="{{index<12}}">
<tag class='bg-{{item.name}} light'>{{item.title}}</tag>
<view class='cu-tag bg-{{item.name}} light'>{{item.title}}</view>
</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>
<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 class='cu-tag line-{{item.name}}'>{{item.title}}</view>
</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">
<capsule>
<tag class='bg-red'>
<text class='icon-likefill'></text>
</tag>
<tag class="line-red">
12
</tag>
</capsule>
<capsule class="round">
<tag class='bg-blue '>
<text class='icon-likefill'></text>
</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 '>
<text class='icon-likefill'></text>
</tag>
<tag class="line-grey">
23
</tag>
</capsule>
<capsule class="radius">
<tag class='bg-brown sm'>
<text class='icon-likefill'></text>
</tag>
<tag class="line-brown sm">
23
</tag>
</capsule>
</view>
<bar class="margin-top">
<view class="padding">
<view class="cu-capsule">
<view class='cu-tag bg-red'>
<text class='icon-likefill'></text>
</view>
<view class="cu-tag line-red">
12
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
<text class='icon-likefill'></text>
</view>
<view class="cu-tag line-blue">
23
</view>
</view>
<view class="cu-capsule round">
<view class='cu-tag bg-blue '>
说明
</view>
<view class="cu-tag line-blue">
123
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-grey '>
<text class='icon-likefill'></text>
</view>
<view class="cu-tag line-grey">
23
</view>
</view>
<view class="cu-capsule radius">
<view class='cu-tag bg-brown sm'>
<text class='icon-likefill'></text>
</view>
<view class="cu-tag line-brown sm">
23
</view>
</view>
</view>
<view class="cu-bar margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>数字标签
</view>
</bar>
</view>
<view class="padding flex justify-between align-center">
<avatar class='xl radius'>
<view class='cu-avatar 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>
<view class="cu-tag badge">99+</view>
</view>
<view class='cu-avatar xl radius' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
<view class='cu-tag badge'>9</view>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99</view>
<text class='icon-people'></text>
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99+</tag>
</avatar>
</view>
<view class='cu-avatar xl radius'>
<view class='cu-tag badge'>99+</view>
</view>
</view>

28
demo/pages/basics/text/text.wxml
View File

@@ -1,18 +1,18 @@
<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>
<view class='action'>
</view>
</bar>
</custom>
<bar class="solid-bottom">
</view>
</view>
<view class="cu-bar solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>文字大小
</view>
</bar>
</view>
<view class='bg-white padding-lr'>
<view class='solids-bottom padding-xs flex align-center'>
<view class='padding'>60</view>
@@ -85,11 +85,11 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字颜色
</view>
</bar>
</view>
<view class='grid col-5 padding-sm'>
<view class='padding-sm' wx:for="{{list}}" wx:key>
<view class='text-{{item.name}} text-center'>
@@ -97,29 +97,29 @@
</view>
</view>
</view>
<bar class="solid-bottom margin-top">
<view class="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字截断
</view>
</bar>
</view>
<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="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>文字对齐
</view>
</bar>
</view>
<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="cu-bar solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>特殊文字
</view>
</bar>
</view>
<view class='padding text-center'>
<view class='padding-lr bg-white'>
<view class='solid-bottom padding'>