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

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>