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

v2.0.3

Browse Source 
1.修复一些单位错误（带输入框的操作条）
2.纠正一些单词拼写...
3.抛弃icon标签，改回text标签的写法
4.抛弃px单位的样式文件
5.优化一些组件的字体大小
6.新增两种加载样式
This commit is contained in:
Weilanwl
2019-01-06 22:59:40 +08:00
parent 2cd0b9366e
commit e85f3bc3ff
40 changed files with 1193 additions and 9820 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<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' /> 头像
<text class='icon-back'></text> 头像
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />头像形状
<text class='icon-title text-blue'></text>头像形状
</view>
</bar>
<view class="padding">
@@ -16,7 +16,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像尺寸
<text class='icon-title text-blue'></text>头像尺寸
</view>
</bar>
<view class="padding">
@@ -27,12 +27,12 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />内嵌文字(图标)
<text class='icon-title text-blue'></text>内嵌文字(图标)
</view>
</bar>
<view class="padding">
<avatar class="radius">
<icon class='icon-people' />
<text class='icon-people'></text>
</avatar>
<avatar class="radius margin-left">
<text>港</text>
@@ -41,7 +41,7 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像颜色
<text class='icon-title text-blue'></text>头像颜色
</view>
</bar>
<view class="padding-sm">
@@ -51,7 +51,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像组
<text class='icon-title text-blue'></text>头像组
</view>
</bar>
<view class='padding'>
@@ -62,7 +62,7 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />头像标签
<text class='icon-title text-blue'></text>头像标签
</view>
</bar>
<view class='padding'>

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

@@ -1,14 +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' /> 背景颜色
<text class='icon-back'></text> 背景颜色
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />深色背景
<text class='icon-title text-blue'></text>深色背景
</view>
</bar>
<view class='grid col-3 padding-sm'>
@@ -22,7 +22,7 @@
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />淡色背景
<text class='icon-title text-blue'></text>淡色背景
</view>
</bar>
<view class='grid col-3 bg-white padding-sm'>
@@ -35,7 +35,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />渐变背景
<text class='icon-title text-blue'></text>渐变背景
</view>
</bar>
<view class='grid col-2 padding-sm'>
@@ -78,7 +78,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />图片背景
<text class='icon-title text-blue'></text>图片背景
</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')">
@@ -93,7 +93,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />视频背景
<text class='icon-title text-blue'></text>视频背景
</view>
</bar>
<view class="bg-video bg-mask">
@@ -109,7 +109,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />透明背景(文字层)
<text class='icon-title text-blue'></text>透明背景(文字层)
</view>
</bar>
<view class='grid col-2 padding-sm'>

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

@@ -1,29 +1,29 @@
<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' /> 按钮
<text class='icon-back'></text> 按钮
</navigator>
<navigator class='action' url='design' hover-class="none">
<icon class='icon-skinfill' />
<text class='icon-skinfill'></text>
<text class="text-df">设计</text>
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />按钮形状
<text class='icon-title text-blue'></text>按钮形状
</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' />
<text class='icon-emojifill'></text>
</button>
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮尺寸
<text class='icon-title text-blue'></text>按钮尺寸
</view>
</bar>
<view class="padding flex flex-wrap justify-between align-center">
@@ -33,7 +33,7 @@
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮颜色
<text class='icon-title text-blue'></text>按钮颜色
</view>
<view class='action'>
<text class='text-df'>阴影</text>
@@ -47,16 +47,16 @@
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />镂空按钮
<text class='icon-title text-blue'></text>镂空按钮
</view>
<view class='action'>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<radio class='blue sm radio' value='' checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<radio class='blue sm radio' value='s'></radio>
<text> 大</text>
</label>
</radio-group>
@@ -69,7 +69,7 @@
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />块状按钮
<text class='icon-title text-blue'></text>块状按钮
</view>
</bar>
<view class="padding flex flex-direction">
@@ -78,7 +78,7 @@
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />无效状态
<text class='icon-title text-blue'></text>无效状态
</view>
</bar>
<view class="padding">
@@ -87,13 +87,13 @@
</view>
<bar class="margin-top ">
<view class='action'>
<icon class='icon-title text-blue' />按钮加图标
<text class='icon-title text-blue'></text>按钮加图标
</view>
</bar>
<view class="padding-xl">
<button class='block line-orange lg'>
<icon class='icon-upload' /> 图标</button>
<text class='icon-upload'></text> 图标</button>
<button class='block bg-blue margin-tb-sm lg'>
<icon class='icon-loading2 iconfont-spin' /> 加载</button>
<text class='icon-loading2 iconfont-spin'></text> 加载</button>
<button class='block bg-black margin-tb-sm lg' loading> 微信加载</button>
</view>

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

@@ -1,7 +1,7 @@
<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' /> 按钮 / 设计
<text class='icon-back'></text> 按钮 / 设计
</navigator>
</bar>
</custom>
@@ -24,15 +24,15 @@
<view class='title'>选择尺寸</view>
<radio-group bindchange='SetSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='sm' />
<radio class='blue sm radio' value='sm'></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<radio class='blue sm radio' value='' checked></radio>
<text> 中</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='lg' />
<radio class='blue sm radio' value='lg'></radio>
<text> 大</text>
</label>
</radio-group>
@@ -49,11 +49,11 @@
<view class='title'>边框大小</view>
<radio-group bindchange='SetBorderSize'>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='' checked/>
<radio class='blue sm radio' value='' checked></radio>
<text> 小</text>
</label>
<label class='margin-left-sm'>
<radio class='blue sm radio' value='s' />
<radio class='blue sm radio' value='s'></radio>
<text> 大</text>
</label>
</radio-group>
@@ -69,7 +69,7 @@
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<view class='grid col-5 padding'>

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

@@ -1,61 +1,58 @@
<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'/>
<text class='icon-back'></text>
表单控件
</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 class='' checked name="sex"></radio>
<radio class='blue sm' name="sex"></radio>
</radio-group>
</view>
<view class="padding-xl ">
<switch class='' />
<switch class=''></switch>
<radio-group>
<radio class='red radio' checked name="sex" />
<radio class='blue radio' name="sex" />
<radio class='red radio' checked name="sex"></radio>
<radio class='blue radio' name="sex"></radio>
</radio-group>
<checkbox class='blue'></checkbox>
<checkbox class='cyan round'></checkbox>
</view>
<view class="padding-xl ">
<switch class=' sm' />
<switch class=' sm'></switch>
<radio-group>
<radio class='red radio sm' checked name="sex" />
<radio class='blue radio sm' name="sex" />
<radio class='red radio sm' checked name="sex"></radio>
<radio class='blue radio sm' name="sex"></radio>
</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' />
<switch class='switch-sex' checked></switch>
<switch class='switch-sex sm'></switch>
</view>
<view class="padding-xl ">
<switch class='red' checked/>
<switch class='blue sm' checked/>
<switch class='red' checked></switch>
<switch class='blue sm' checked></switch>
</view>
<view class="padding-xl ">
<switch class='' checked/>
<switch class=' sm' checked/>
<switch class='' checked></switch>
<switch class=' sm' checked></switch>
</view>
<view class="padding-xl ">
<switch class='' />
<switch class=' sm' />
<switch class=''></switch>
<switch class=' sm'></switch>
</view>
<view class="padding-xl ">
<switch class='orange sm radius' />
<switch class='yellow radius' />
<switch class='orange sm radius'></switch>
<switch class='yellow radius'></switch>
</view>
<view class="padding-xl ">
<switch class='blue radius' />
<switch class='blue radius'></switch>
</view>
</view>

2
demo/pages/basics/home/home.wxml
View File

@@ -3,6 +3,6 @@
<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}}'/>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>

3
demo/pages/basics/home/home.wxss
View File

@@ -0,0 +1,3 @@
.weui-tabbar{
left: 0px !important;
}

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

@@ -1,22 +1,19 @@
<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'/> 图标
<text class='icon-back'></text> 图标
</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 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}}">
<icon class='icon-{{item.name}} lg text-gray'/>
<text class='icon-{{item.name}} lg text-gray'></text>
<text>{{item.name}}</text>
</item>
</list>

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

@@ -1,7 +1,7 @@
<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'/>
<text class='icon-back'></text>
图片
</navigator>
<view class='action'>

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

@@ -1,7 +1,7 @@
<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' /> 布局
<text class='icon-back'></text> 布局
</navigator>
</bar>
</custom>
@@ -13,7 +13,7 @@
<block wx:if="{{TabCur==0}}">
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />固定尺寸
<text class='icon-title text-blue'></text>固定尺寸
</view>
</bar>
<view class="padding bg-white">
@@ -29,7 +29,7 @@
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />比例布局
<text class='icon-title text-blue'></text>比例布局
</view>
</bar>
<view class="padding bg-white">
@@ -49,7 +49,7 @@
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />水平对齐(justify)
<text class='icon-title text-blue'></text>水平对齐(justify)
</view>
</bar>
<view class="bg-white">
@@ -76,7 +76,7 @@
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />垂直对齐(align)
<text class='icon-title text-blue'></text>垂直对齐(align)
</view>
</bar>
<view class="bg-white">
@@ -97,7 +97,7 @@
<block wx:if="{{TabCur==1}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />等分列
<text class='icon-title text-blue'></text>等分列
</view>
<view class='action'></view>
</bar>
@@ -108,7 +108,7 @@
</view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />等高
<text class='icon-title text-blue'></text>等高
</view>
<view class='action'></view>
</bar>
@@ -121,7 +121,7 @@
<block wx:if="{{TabCur==2}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />浮动
<text class='icon-title text-blue'></text>浮动
</view>
</bar>
<view class="bg-white padding">
@@ -134,7 +134,7 @@
<block wx:if="{{TabCur==3}}">
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />内外边距
<text class='icon-title text-blue'></text>内外边距
</view>
</bar>
<view class="bg-white">

2
demo/pages/basics/layout/layout.wxss
View File

@@ -1,3 +1,3 @@
page{
padding-top: 45px;
}
}

27
demo/pages/basics/loading/loading.js
View File

@@ -2,11 +2,36 @@ const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar
CustomBar: app.globalData.CustomBar,
loadProgress:0
},
isLoading (e) {
this.setData({
isLoad: e.detail.value
})
},
loadModal () {
this.setData({
loadModal: true
})
setTimeout(()=> {
this.setData({
loadModal: false
})
}, 2000)
},
loadProgress(){
this.setData({
loadProgress: this.data.loadProgress+3
})
if (this.data.loadProgress<100){
setTimeout(() => {
this.loadProgress();
}, 100)
}else{
this.setData({
loadProgress: 0
})
}
}
});

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

@@ -1,31 +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' /> 加载
<text class='icon-back'></text> 加载
</navigator>
<view class='action'>
<load class="load-icon {{!isLoad?'loading':'over'}}"></load>
<load class="load-text {{!isLoad?'loading':'over'}}"></load>
</view>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue'/>背景
<text class='icon-title text-blue'></text>背景
</view>
</bar>
<load class="bg-blue {{!isLoad?'loading':'over'}}"></load>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>加载状态
<text class='icon-title text-blue'></text>加载状态
</view>
<view class='action'>
<switch class='sm' bindchange='isLoading'></switch>
<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'/>加载错误
<text class='icon-title text-blue'></text>加载错误
</view>
</bar>
<load class="bg-red erro"></load>
<load class="bg-red erro"></load>
<bar class="margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>弹框加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadModal'>
点我
</button>
</view>
</bar>
<load class='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 class='action'>
<text class='icon-title text-blue'></text>进度条加载
</view>
<view class='action'>
<button class='bg-green shadow' bindtap='loadProgress'>
点我
</button>
</view>
</bar>
<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>
</view>

2
demo/pages/basics/loading/loading.wxss
View File

@@ -1 +1 @@
/* pages/basics/load/load.wxss */
/* pages/basics/load/load.wxss */

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

@@ -1,13 +1,13 @@
<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' /> 进度条
<text class='icon-back'></text> 进度条
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />进度条形状
<text class='icon-title text-blue'></text>进度条形状
</view>
</bar>
<view class="padding bg-white">
@@ -23,7 +23,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条尺寸
<text class='icon-title text-blue'></text>进度条尺寸
</view>
</bar>
<view class="padding bg-white">
@@ -40,7 +40,7 @@
<bar class="solid-bottom margin-top" bindtap="showModal" data-target="ColorModal">
<view class='action'>
<icon class='icon-title text-blue' />进度条颜色
<text class='icon-title text-blue'></text>进度条颜色
</view>
<view class='action'>
<view class='padding-sm bg-{{color}} solid radius shadow-blur'></view>
@@ -55,7 +55,7 @@
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条条纹
<text class='icon-title text-blue'></text>进度条条纹
</view>
<switch class='sm margin-right-sm' bindchange='SetActive'></switch>
</bar>
@@ -69,7 +69,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条比例
<text class='icon-title text-blue'></text>进度条比例
</view>
</bar>
<view class="padding bg-white">
@@ -81,7 +81,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue' />进度条布局
<text class='icon-title text-blue'></text>进度条布局
</view>
</bar>
<view class="padding bg-white ">
@@ -89,7 +89,7 @@
<progress-bar class="round">
<view class='bg-green' style="width:{{loading?'100%':''}};"></view>
</progress-bar>
<icon class='icon-roundcheckfill text-green margin-left-sm' />
<text class='icon-roundcheckfill text-green margin-left-sm'></text>
</view>
<view class='flex margin-top'>
<progress-bar class="round">
@@ -104,7 +104,7 @@
<bar class="justify-end">
<view class='content'>选择颜色</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<view class='grid col-5 padding'>

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

@@ -1,13 +1,13 @@
<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' /> 边框阴影
<text class='icon-back'></text> 边框阴影
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue' />边框
<text class='icon-title text-blue'></text>边框
</view>
<view class='action'>
<switch class='sm' bindchange='SetSize'></switch>
@@ -22,7 +22,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />阴影
<text class='icon-title text-blue'></text>阴影
</view>
</bar>
<view class="padding text-center">

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

@@ -1,14 +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' /> 标签
<text class='icon-back'></text> 标签
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-blue' />标签形状
<text class='icon-title text-blue'></text>标签形状
</view>
</bar>
<view class="padding">
@@ -19,7 +19,7 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签尺寸
<text class='icon-title text-blue'></text>标签尺寸
</view>
</bar>
<view class="padding">
@@ -28,7 +28,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />标签颜色
<text class='icon-title text-blue'></text>标签颜色
</view>
</bar>
<view class='padding-sm flex flex-wrap'>
@@ -41,7 +41,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />镂空标签
<text class='icon-title text-blue'></text>镂空标签
</view>
</bar>
<view class='padding-sm flex flex-wrap'>
@@ -51,13 +51,13 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />胶囊样式
<text class='icon-title text-blue'></text>胶囊样式
</view>
</bar>
<view class="padding">
<capsule>
<tag class='bg-red'>
<icon class='icon-likefill' />
<text class='icon-likefill'></text>
</tag>
<tag class="line-red">
12
@@ -65,7 +65,7 @@
</capsule>
<capsule class="round">
<tag class='bg-blue '>
<icon class='icon-likefill' />
<text class='icon-likefill'></text>
</tag>
<tag class="line-blue">
23
@@ -81,7 +81,7 @@
</capsule>
<capsule class="radius">
<tag class='bg-grey '>
<icon class='icon-likefill' />
<text class='icon-likefill'></text>
</tag>
<tag class="line-grey">
23
@@ -89,7 +89,7 @@
</capsule>
<capsule class="radius">
<tag class='bg-brown sm'>
<icon class='icon-likefill' />
<text class='icon-likefill'></text>
</tag>
<tag class="line-brown sm">
23
@@ -98,7 +98,7 @@
</view>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-blue' />数字标签
<text class='icon-title text-blue'></text>数字标签
</view>
</bar>
<view class="padding flex justify-between align-center">
@@ -111,7 +111,7 @@
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99</tag>
<icon class='icon-people' />
<text class='icon-people'></text>
</avatar>
<avatar class='xl radius'>
<tag class='badge'>99+</tag>

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

@@ -1,7 +1,7 @@
<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'/> 文本
<text class='icon-back'></text> 文本
</navigator>
<view class='action'>
@@ -10,7 +10,7 @@
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-title text-blue'/>文字大小
<text class='icon-title text-blue'></text>文字大小
</view>
</bar>
<view class='bg-white padding-lr'>
@@ -18,7 +18,7 @@
<view class='padding'>60</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-xsl padding'>
<icon class=' icon-roundcheckfill text-green'/>
<text class=' icon-roundcheckfill text-green'></text>
</view>
<view class='padding'>用于图标、数字等特大显示</view>
</view>
@@ -27,7 +27,7 @@
<view class='padding'>40</view>
<view class='flex-sub text-center'>
<view class='solid-bottom text-sl padding'>
<icon class=' icon-roundcheckfill text-green'/>
<text class=' icon-roundcheckfill text-green'></text>
</view>
<view class='padding'>用于图标、数字等较大显示</view>
</view>
@@ -87,7 +87,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字颜色
<text class='icon-title text-blue'></text>文字颜色
</view>
</bar>
<view class='grid col-5 padding-sm'>
@@ -99,7 +99,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字截断
<text class='icon-title text-blue'></text>文字截断
</view>
</bar>
<view class='padding bg-white'>
@@ -107,7 +107,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>文字对齐
<text class='icon-title text-blue'></text>文字对齐
</view>
</bar>
<view class='padding bg-white'>
@@ -117,7 +117,7 @@
</view>
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-title text-blue'/>特殊文字
<text class='icon-title text-blue'></text>特殊文字
</view>
</bar>
<view class='padding text-center'>

116
demo/pages/component/bar/bar.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' />
<text class='icon-back'></text>
<text>操作条</text>
</navigator>
</bar>
@@ -9,31 +9,31 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' />
<text class='icon-back text-gray'></text>
<text>返回</text>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-green ' />
<text class='icon-title text-green'></text>
<text>案例</text>
</view>
<view class='action'>
<button class='bg-green shadow-blur sm'>添加
<icon class='icon-add' /> </button>
<text class='icon-add'></text> </button>
</view>
</bar>
<bar class="margin-top justify-end">
<view class='action'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<bar class="margin-top">
<view class='action'>
<icon class='icon-back text-gray' /> 返回
<text class='icon-back text-gray'></text> 返回
</view>
<view class='content'>
操作条
@@ -42,20 +42,20 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-homefill text-gray' /> 首页
<text class='icon-homefill text-gray'></text> 首页
</view>
<view class='content'>
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class='action'>
<icon class='icon-cardboardfill text-grey' />
<icon class='icon-recordfill text-red' />
<text class='icon-cardboardfill text-grey'></text>
<text class='icon-recordfill text-red'></text>
</view>
</bar>
<bar class="margin-top bg-blue">
<view class='action'>
<icon class='icon-close' /> 关闭
<text class='icon-close'></text> 关闭
</view>
<view class='content'>
海蓝
@@ -63,7 +63,7 @@
</bar>
<bar class="margin-top bg-orange">
<view class='action'>
<icon class='icon-back' /> 返回
<text class='icon-back'></text> 返回
</view>
<view class='content'>
操作条
@@ -76,49 +76,49 @@
ColorUI
</view>
<view class='action'>
<icon class="icon-more" />
<text class="icon-more"></text>
</view>
</bar>
<bar class="margin-top bg-red search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></avatar>
<view class='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
<text class="icon-triangledownfill"></text>
</view>
</bar>
<bar class="margin-top search">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></avatar>
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<text>广州</text>
<icon class="icon-triangledownfill" />
<text class="icon-triangledownfill"></text>
</view>
</bar>
<bar class="margin-top bg-cyan search">
<view class='serach-form radius'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
<view class='search-form radius'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<icon class='icon-close' />
<text class='icon-close'></text>
<text>取消</text>
</view>
</bar>
<bar class="margin-top search">
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search" />
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class='action'>
<button class='bg-green shadow-blur round'>搜索</button>
@@ -144,35 +144,35 @@
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<button class="action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
</text>
客服
</view>
</button>
<view class="action text-orange">
<icon class='icon-favorfill' /> 已收藏
<text class='icon-favorfill'></text> 已收藏
</view>
<view class="action">
<icon class='icon-cart'>
<text class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
</text>
购物车
</view>
<view class='bg-red submit'>立即订购</view>
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<button class="action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
</text>
客服
</view>
</button>
<view class="action">
<icon class='icon-cart'>
<text class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
</text>
购物车
</view>
<view class='bg-orange submit'>加入购物车</view>
@@ -180,19 +180,19 @@
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<button class="action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
</text>
客服
</button>
<view class="action">
<text class=' icon-shop'></text> 店铺
</view>
<view class="action">
<icon class=' icon-shop' /> 店铺
</view>
<view class="action">
<icon class='icon-cart'>
<text class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
</text>
购物车
</view>
<view class='submit'>
@@ -201,16 +201,16 @@
</bar>
<bar class="margin-top shop">
<view class="action">
<icon class='icon-service text-green'>
<button class="action" open-type='contact'>
<text class='icon-service text-green'>
<tag class='badge'></tag>
</icon>
</text>
客服
</view>
</button>
<view class="action">
<icon class='icon-cart'>
<text class='icon-cart'>
<tag class='badge'>99</tag>
</icon>
</text>
购物车
</view>
<view class='submit'>
@@ -223,11 +223,11 @@
<bar class="margin-top input">
<view class='action'>
<icon class='icon-sound text-grey' />
<text class='icon-sound text-grey'></text>
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>
@@ -235,11 +235,11 @@
<bar class="margin-top input">
<avatar class="round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
<view class='action'>
<icon class='icon-roundaddfill text-grey' />
<text class='icon-roundaddfill text-grey'></text>
</view>
<input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey' />
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>

24
demo/pages/component/card/card.wxml
View File

@@ -1,13 +1,13 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 卡片
<text class='icon-back'></text> 卡片
</navigator>
</bar>
</custom>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-titles text-orange ' /> 案例类卡片
<text class='icon-titles text-orange '></text> 案例类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -28,9 +28,9 @@
<view class='text-gray text-sm flex justify-between'>
十天前
<view class="text-gray text-sm">
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 30
<text class="icon-attentionfill"></text> 10
<text class="icon-appreciatefill"></text> 20
<text class="icon-messagefill"></text> 30
</view>
</view>
</view>
@@ -40,7 +40,7 @@
</card>
<bar class="solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<icon class='icon-titles text-orange ' /> 动态类卡片
<text class='icon-titles text-orange '></text> 动态类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -67,9 +67,9 @@
</view>
</view>
<view class='text-gray text-sm text-right padding'>
<icon class="icon-attentionfill" /> 10
<icon class="icon-appreciatefill" /> 20
<icon class="icon-messagefill" /> 30
<text class="icon-attentionfill"></text> 10
<text class="icon-appreciatefill"></text> 20
<text class="icon-messagefill"></text> 30
</view>
<list class="menu menu-avatar comment solids-top">
<item wx:for="{{2}}" wx:key>
@@ -88,8 +88,8 @@
<view class='margin-top-sm flex justify-between'>
<view class='text-gray text-df'>2018年12月4日</view>
<view>
<icon class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}" />
<icon class="icon-messagefill text-gray margin-left-sm" />
<text class="icon-appreciate{{!isZan?'fill':''}} text-{{!isZan?'red':'gray'}}"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
@@ -100,7 +100,7 @@
<bar class="solid-bottom margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 文章类卡片
<text class='icon-titles text-orange '></text> 文章类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>

14
demo/pages/component/chat/chat.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
<text class='icon-back'></text>
聊天
</navigator>
</bar>
@@ -28,7 +28,7 @@
<view class='date '> 13:23</view>
</item>
<info>
<icon class='icon-roundclosefill text-red '/> 对方拒绝了你的消息
<text class='icon-roundclosefill text-red '></text> 对方拒绝了你的消息
</info>
<info>
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
@@ -47,7 +47,7 @@
3"
</view>
<view class='content shadow'>
<icon class='icon-sound text-xxl padding-right-xl'> </icon>
<text class='icon-sound text-xxl padding-right-xl'> </text>
</view>
</view>
<avatar class="radius" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></avatar>
@@ -56,7 +56,7 @@
<item class="self">
<view class="main">
<view class='action'>
<icon class='icon-locationfill text-orange text-xxl'/>
<text class='icon-locationfill text-orange text-xxl'></text>
</view>
<view class='content shadow'>
喵星球，喵喵市
@@ -72,7 +72,7 @@
@#$^&**
</view>
<view class='action text-grey'>
<icon class='icon-warnfill text-red text-xxl'/> <text class='text-sm margin-left-sm'>翻译错误</text>
<text class='icon-warnfill text-red text-xxl'></text> <text class='text-sm margin-left-sm'>翻译错误</text>
</view>
</view>
<view class='date'>13:23</view>
@@ -81,11 +81,11 @@
<bar class="foot input">
<view class='action'>
<icon class='icon-sound text-grey'/>
<text class='icon-sound text-grey'></text>
</view>
<input class='solid-bottom' focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class='action'>
<icon class='icon-emojifill text-grey'/>
<text class='icon-emojifill text-grey'></text>
</view>
<button class='bg-green shadow-blur'>发送</button>
</bar>

24
demo/pages/component/form/form.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 表单
<text class='icon-back'></text> 表单
</navigator>
</bar>
</custom>
@@ -22,7 +22,7 @@
<form-group>
<view class='title'>收货地址</view>
<input placeholder="输入框带个图标" class='radius' name='input'></input>
<icon class='icon-locationfill text-orange' />
<text class='icon-locationfill text-orange'></text>
</form-group>
<form-group>
<view class='title'>验证码</view>
@@ -94,34 +94,34 @@
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<switch class='red sm' checked/>
<switch class='red sm' checked></switch>
</form-group>
<form-group>
<switch class='switch-sex' checked/>
<switch class='switch-sex' checked></switch>
<view class='title'>定义图标</view>
</form-group>
<form-group>
<view class='title'>方形开关</view>
<switch class='orange radius sm' checked/>
<switch class='orange radius sm' checked></switch>
</form-group>
<radio-group class="block">
<form-group class="margin-top">
<view class='title'>单选操作(radio)</view>
<radio checked />
<radio checked></radio>
</form-group>
<form-group>
<view class='title'>定义尺寸</view>
<radio class='sm' />
<radio class='sm'></radio>
</form-group>
<form-group>
<view class='title'>定义样式</view>
<radio class='radio' />
<radio class='radio'></radio>
</form-group>
<form-group>
<view class='title'>定义颜色</view>
<view>
<radio class='blue radio' />
<radio class='red margin-left-sm' />
<radio class='blue radio'></radio>
<radio class='red margin-left-sm'></radio>
</view>
</form-group>
</radio-group>
@@ -148,11 +148,11 @@
</view>
<view class="padding-xs bg-img" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);">
<tag class="bg-red">
<icon class='icon-close'></icon>
<text class='icon-close'></text>
</tag>
</view>
<view class="padding-xs solids">
<icon class='icon-cameraadd'></icon>
<text class='icon-cameraadd'></text>
</view>
</view>
</form-group>

2
demo/pages/component/home/home.wxml
View File

@@ -3,6 +3,6 @@
<navigator hover-class='none' url="../{{item.name}}/{{item.name}}" class="nav-li bg-{{item.color}}" style='animation: show {{(index+1)*0.2+1}}s 1;-webkit-animation: show {{(index+1)*0.2+1}}s 1;' wx:for="{{elements}}" wx:key>
<view class="nav-title">{{item.title}}</view>
<view class="nav-name">{{item.name}}</view>
<icon class='icon-{{item.icon}}'/>
<text class='icon-{{item.icon}}'></text>
</navigator>
</view>

172
demo/pages/component/list/list.wxml
View File

@@ -1,173 +1,173 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/> 列表
<text class='icon-back'></text> 列表
</navigator>
</bar>
</custom>
<view class="page {{skin?' invert ':' '}}">
<list class="grid col-3">
<item>
<icon class='icon-cardboardfill text-red'/>
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
</text>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
</text>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
<item>
<icon class='icon-servicefill text-pink'/>
<text class='icon-servicefill text-pink'></text>
<text>反馈</text>
</item>
</list>
<list class="grid col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
</text>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
</text>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
</list>
<list class="grid no-border col-4">
<item>
<icon class='icon-cardboardfill text-red'/>
<text class='icon-cardboardfill text-red'></text>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
<text class='icon-noticefill text-olive'>
<tag class="badge">99+</tag>
</icon>
</text>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
</text>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
</list>
<list class="grid col-5 no-border">
<item>
<icon class='icon-cardboardfill text-red'>
<text class='icon-cardboardfill text-red'>
<tag class="badge">99+</tag>
</icon>
</text>
<text>VR</text>
</item>
<item>
<icon class='icon-recordfill text-orange'/>
<text class='icon-recordfill text-orange'></text>
<text>录像</text>
</item>
<item>
<icon class='icon-picfill text-yellow'/>
<text class='icon-picfill text-yellow'></text>
<text>图像</text>
</item>
<item>
<icon class='icon-noticefill text-olive'>
</icon>
<text class='icon-noticefill text-olive'>
</text>
<text>通知</text>
</item>
<item>
<icon class='icon-upstagefill text-cyan'/>
<text class='icon-upstagefill text-cyan'></text>
<text>排行榜</text>
</item>
<item>
<icon class='icon-clothesfill text-blue'>
<text class='icon-clothesfill text-blue'>
<tag class="badge"></tag>
</icon>
</text>
<text>皮肤</text>
</item>
<item>
<icon class='icon-discoverfill text-purple'/>
<text class='icon-discoverfill text-purple'></text>
<text>发现</text>
</item>
<item>
<icon class='icon-questionfill text-mauve'/>
<text class='icon-questionfill text-mauve'></text>
<text>帮助</text>
</item>
<item>
<icon class='icon-commandfill text-purple'/>
<text class='icon-commandfill text-purple'></text>
<text>问答</text>
</item>
<item>
<icon class='icon-brandfill text-mauve'/>
<text class='icon-brandfill text-mauve'></text>
<text>版权</text>
</item>
</list>
@@ -175,23 +175,23 @@
<item>
<view class='content'>
<view>
<icon class='icon-clothesfill text-blue'/> 皮肤设置</view>
<text class='icon-clothesfill text-blue'></text> 皮肤设置</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 皮肤需要付费购买</view>
<text class='icon-infofill'></text> 皮肤需要付费购买</view>
</view>
<view class='action'>
<switch class='switch-sex sm' bindchange="switchSex" />
<switch class='switch-sex sm' bindchange="switchSex"></switch>
</view>
</item>
<item>
<view class='content'>
<view>
<icon class='icon-musicfill text-red'/> 声音控制</view>
<text class='icon-musicfill text-red'></text> 声音控制</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill'/> 需要获得系统权限</view>
<text class='icon-infofill'></text> 需要获得系统权限</view>
</view>
<view class='action'>
<switch class='switch-music' />
<switch class='switch-music'></switch>
</view>
</item>
</list>
@@ -201,7 +201,7 @@
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill text-red'/> 消息未送达</view>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
@@ -217,11 +217,11 @@
<tag class="round bg-orange sm">SVIP</tag>
</view>
<view class='text-gray text-sm'>
<icon class='icon-redpacket_fill text-red'/> 收到红包</view>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>
@@ -260,35 +260,53 @@
</view>
<view class='text-gray text-sm'>
喵星酱：
<icon class='icon-picfill text-orange'/> 图片传输中...</view>
<text class='icon-picfill text-orange'></text> 图片传输中...</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>
<list class="menu">
<item>
<view class='content'>
<icon class='icon-circlefill text-grey'/>
<text class='text-grey'>默认</text>
<text class='icon-circlefill text-grey'></text>
<text class='text-grey'>图标 + 标题</text>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojifill text-red'/>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>图片 + 标题</text>
</view>
</item>
<item>
<button class='content' open-type='contact'>
<text class='icon-btn text-olive'></text>
<text class='text-grey'>Open-type 按钮</text>
</button>
</item>
<item>
<navigator class='content' hover-class='none' url='../list/list' open-type="redirect">
<text class='icon-discoverfill text-orange'></text>
<text class='text-grey'>Navigator 跳转</text>
</navigator>
</item>
<item>
<view class='content'>
<text class='icon-emojifill text-red'></text>
<text class='text-grey'>头像</text>
</view>
<view class='action'>
<avatar class="sm round">
<icon class='icon-people'/>
<text class='icon-people'></text>
</avatar>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-emojiflashfill text-pink'/>
<text class='icon-emojiflashfill text-pink'></text>
<text class='text-grey'>头像组</text>
</view>
<view class='action'>
@@ -303,35 +321,35 @@
</item>
<item>
<view class='content'>
<icon class='icon-crown text-green'/>
<text class='icon-crown text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-green sm'>
<icon class='icon-upload'/> 上传</button>
<text class='icon-upload'></text> 上传</button>
</view>
</item>
<item>
<view class='content'>
<icon class='icon-crownfill text-green'/>
<text class='icon-crownfill text-green'></text>
<text class='text-grey'>按钮</text>
</view>
<view class='action'>
<button class='round bg-blue'>
<icon class='icon-down'/> 下载</button>
<text class='icon-down'></text> 下载</button>
</view>
</item>
</list>
<list class="menu">
<item class="arrow">
<view class='content'>
<icon class='icon-roundrightfill text-grey'/>
<text class='icon-roundrightfill text-grey'></text>
<text class='text-grey'>箭头</text>
</view>
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-tagfill text-red'/>
<text class='icon-tagfill text-red'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
@@ -342,7 +360,7 @@
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warn text-green'/>
<text class='icon-warn text-green'></text>
<text class='text-grey'>文本</text>
</view>
<view class='action'>
@@ -351,7 +369,7 @@
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-warnfill text-green'/>
<text class='icon-warnfill text-green'></text>
<text class='text-grey'>文本</text>
<text class='text-grey text-sm margin-left-sm'>小目标还没有实现！</text>
</view>
@@ -360,7 +378,7 @@
<list class="menu no-padding">
<item>
<view class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
@@ -369,7 +387,7 @@
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
@@ -378,13 +396,13 @@
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
<text class='icon-locationfill'></text>
</tag>
<tag class="line-blue">
广州
@@ -396,7 +414,7 @@
<list class="menu no-padding card-menu margin-bottom-xl">
<item>
<view class='content'>
<icon class='icon-radiobox text-orange'/>
<text class='icon-radiobox text-orange'></text>
<text class='text-grey'>徽章</text>
</view>
<view class='action'>
@@ -405,7 +423,7 @@
</item>
<item>
<view class='content'>
<icon class='icon-tagfill text-olive'/>
<text class='icon-tagfill text-olive'></text>
<text class='text-grey'>标签</text>
</view>
<view class='action'>
@@ -414,13 +432,13 @@
</item>
<item class="arrow">
<view class='content'>
<icon class='icon-radioboxfill text-blue'/>
<text class='icon-radioboxfill text-blue'></text>
<text class='text-grey'>胶囊</text>
</view>
<view class='action'>
<capsule class="round">
<tag class='bg-blue'>
<icon class='icon-locationfill'/>
<text class='icon-locationfill'></text>
</tag>
<tag class="line-blue">
广州

20
demo/pages/component/modal/modal.wxml
View File

@@ -1,14 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 模态窗口
<text class='icon-back'></text> 模态窗口
</navigator>
</bar>
</custom>
<bar class="">
<view class='action'>
<icon class='icon-titles text-orange ' /> 模态窗口
<text class='icon-titles text-orange '></text> 模态窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Modal">Modal</button>
@@ -19,7 +19,7 @@
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<view class='padding-xl'>
@@ -30,7 +30,7 @@
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 底部窗口
<text class='icon-titles text-orange '></text> 底部窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -50,7 +50,7 @@
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 对话窗口
<text class='icon-titles text-orange '></text> 对话窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -62,7 +62,7 @@
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<view class='padding-xl'>
@@ -83,7 +83,7 @@
<bar class="justify-end">
<view class='content'>Modal标题</view>
<view class='action' bindtap='hideModal'>
<icon class='icon-close text-red'></icon>
<text class='icon-close text-red'></text>
</view>
</bar>
<view class='padding-xl'>
@@ -91,7 +91,7 @@
</view>
<bar>
<view class='action margin-0 flex-sub text-green ' bindtap='hideModal'>
<icon class='icon-moneybag'></icon>微信支付</view>
<text class='icon-moneybag'></text>微信支付</view>
<view class='action margin-0 flex-sub text-green solid-left' bindtap='hideModal'>取消</view>
<view class='action margin-0 flex-sub solid-left' bindtap='hideModal'>确定</view>
</bar>
@@ -100,7 +100,7 @@
<bar class=" margin-top">
<view class='action'>
<icon class='icon-titles text-orange ' /> 图片窗口
<text class='icon-titles text-orange '></text> 图片窗口
</view>
<view class='action'>
<button class='bg-green shadow' bindtap="showModal" data-target="Image">Image</button>
@@ -112,7 +112,7 @@
<view class="bg-img" style="background-image: url('https://albedo-theme.com/wp-content/uploads/2016/08/pexels-photo-26180.jpg');height:200px;">
<bar class="justify-end none-bg text-white">
<view class='action' bindtap='hideModal'>
<icon class='icon-close '></icon>
<text class='icon-close '></text>
</view>
</bar>
</view>

26
demo/pages/component/nav/nav.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 导航栏
<text class='icon-back'></text> 导航栏
</navigator>
</bar>
</custom>
@@ -10,7 +10,7 @@
</view>
<bar class="solid-bottom">
<view class='action'>
<icon class='icon-titles text-orange ' /> 默认
<text class='icon-titles text-orange '></text> 默认
</view>
</bar>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
@@ -21,7 +21,7 @@
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 居中
<text class='icon-title text-orange'></text> 居中
</view>
</bar>
<scroll-view scroll-x class="bg-white nav text-center">
@@ -32,7 +32,7 @@
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 平分
<text class='icon-title text-orange'></text> 平分
</view>
</bar>
<scroll-view scroll-x class="bg-white nav">
@@ -44,7 +44,7 @@
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 背景
<text class='icon-title text-orange'></text> 背景
</view>
</bar>
<scroll-view scroll-x class="bg-red nav text-center">
@@ -54,34 +54,34 @@
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 图标
<text class='icon-title text-orange'></text> 图标
</view>
</bar>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<icon class='icon-camerafill'></icon> 数码
<text class='icon-camerafill'></text> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<icon class='icon-upstagefill'></icon> 排行榜
<text class='icon-upstagefill'></text> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<icon class='icon-clothesfill'></icon> 皮肤
<text class='icon-clothesfill'></text> 皮肤
</item>
</scroll-view>
<bar class="margin-top solid-bottom">
<view class='action'>
<icon class='icon-title text-orange' /> 定位
<text class='icon-title text-orange'></text> 定位
</view>
</bar>
<scroll-view scroll-x class="bg-green nav text-center">
<item class="{{0==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="0">
<icon class='icon-camerafill'></icon> 数码
<text class='icon-camerafill'></text> 数码
</item>
<item class="{{1==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="1">
<icon class='icon-upstagefill'></icon> 排行榜
<text class='icon-upstagefill'></text> 排行榜
</item>
<item class="{{2==TabCur?'text-white cur':''}}" bindtap='tabSelect' data-id="2">
<icon class='icon-clothesfill'></icon> 皮肤
<text class='icon-clothesfill'></text> 皮肤
</item>
</scroll-view>

10
demo/pages/component/swiper/swiper.wxml
View File

@@ -1,13 +1,13 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 轮播图
<text class='icon-back'></text> 轮播图
</navigator>
</bar>
</custom>
<bar>
<view class='action'>
<icon class='icon-title text-pink' /> 全屏限高轮播
<text class='icon-title text-pink'></text> 全屏限高轮播
</view>
<view class='action'>
<switch class='sm' bindchange='DotStyle'></switch>
@@ -15,12 +15,12 @@
</bar>
<swiper class="screen-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
<swiper-item wx:for="{{4}}" wx:key>
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
<image src="https://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill'></image>
</swiper-item>
</swiper>
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-pink' /> 卡片式轮播
<text class='icon-title text-pink'></text> 卡片式轮播
</view>
</bar>
<swiper class="card-swiper {{DotStyle?'square-dot':'round-dot'}}" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" bindchange="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
@@ -31,7 +31,7 @@
<bar class="margin-top">
<view class='action'>
<icon class='icon-title text-pink' /> 堆叠式轮播
<text class='icon-title text-pink'></text> 堆叠式轮播
</view>
</bar>
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">

8
demo/pages/component/timeline/timeline.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back'/>
<text class='icon-back'></text>
时间轴
</navigator>
</bar>
@@ -61,7 +61,7 @@
<view class='content'>
<view class='text-grey'>文晓港</view>
<view class='text-gray text-sm'>
<icon class='icon-infofill text-red'/> 消息未送达</view>
<text class='icon-infofill text-red'></text> 消息未送达</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
@@ -77,11 +77,11 @@
<tag class="round orange sm">SVIP</tag>
</view>
<view class='text-gray text-sm'>
<icon class='icon-redpacket_fill text-red'/> 收到红包</view>
<text class='icon-redpacket_fill text-red'></text> 收到红包</view>
</view>
<view class='action'>
<view class='text-grey text-xs'>22:20</view>
<icon class='icon-notice_forbid_fill text-gray'/>
<text class='icon-notice_forbid_fill text-gray'></text>
</view>
</item>
</list>

2
demo/pages/plugin/animation/animation.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/wdh2236.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 微动画
<text class='icon-back'></text> 微动画
</navigator>
</bar>
</custom>

2
demo/pages/plugin/gradual/gradual.wxml
View File

@@ -1,7 +1,7 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed gradual-orange" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 渐变
<text class='icon-back'></text> 渐变
</navigator>
</bar>
</custom>

8
demo/pages/plugin/indexes/indexes.wxml
View File

@@ -1,14 +1,14 @@
<custom style="height:{{CustomBar}}px;">
<bar class="fixed none-bg text-white bg-img" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;background-image:url(https://image.weilanwl.com/color2.0/plugin/sylb2244.jpg);">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<icon class='icon-back' /> 索引
<text class='icon-back'></text> 索引
</navigator>
</bar>
</custom>
<bar class="search fixed" style="top:{{CustomBar}}px;">
<view class='serach-form round'>
<icon class="icon-search" />
<input type="text" placeholder="输入搜索的关键词" confirm-type="search" />
<view class='search-form round'>
<text class="icon-search"></text>
<input type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
</view>
<view class='action'>
<button class='gradual-green shadow-blur round'>搜索</button>