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

v2.1.3

Browse Source
This commit is contained in:
Weilanwl
2019-04-23 14:26:34 +08:00
parent 17ff7fb4e2
commit ac2a320457
49 changed files with 6489 additions and 4875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,33 @@
<cu-custom bgColor="bg-gradual-pink" isCustom="{{true}}"><view slot="content">操作条</view></cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>底部操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar tabbar bg-white">
<view class="action">
<view class="icon-cu-image">
<view class="cuIcon-cu-image">
<image src="/images/tabbar/basics_cur.png"></image>
</view>
<view class="text-green">元素</view>
</view>
<view class="action">
<view class="icon-cu-image">
<view class="cuIcon-cu-image">
<image src="/images/tabbar/component.png"></image>
</view>
<view class="text-gray">组件</view>
</view>
<view class="action">
<view class="icon-cu-image">
<view class="cuIcon-cu-image">
<image src="/images/tabbar/plugin.png"></image>
<view class="cu-tag badge">99</view>
</view>
<view class="text-gray">扩展</view>
</view>
<view class="action">
<view class="icon-cu-image">
<view class="cuIcon-cu-image">
<image src="/images/tabbar/about.png"></image>
<view class="cu-tag badge"></view>
</view>
@@ -36,23 +36,23 @@
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-black">
<view class="action text-orange">
<view class="icon-homefill"></view> 首页
<view class="cuIcon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
<view class="cuIcon-similar"></view> 分类
</view>
<view class="action text-gray">
<view class="icon-recharge"></view>
<view class="cuIcon-recharge"></view>
积分
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
我的
@@ -60,23 +60,23 @@
</view>
<view class="cu-bar tabbar margin-bottom-xl bg-white">
<view class="action text-green">
<view class="icon-homefill"></view> 首页
<view class="cuIcon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
<view class="cuIcon-similar"></view> 分类
</view>
<view class="action text-gray add-action">
<button class="cu-btn icon-add bg-green shadow"></button>
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
我的
@@ -84,23 +84,23 @@
</view>
<view class="cu-bar tabbar bg-black">
<view class="action text-green">
<view class="icon-homefill"></view> 首页
<view class="cuIcon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="icon-similar"></view> 分类
<view class="cuIcon-similar"></view> 分类
</view>
<view class="action text-gray add-action">
<button class="cu-btn icon-add bg-green shadow"></button>
<button class="cu-btn cuIcon-add bg-green shadow"></button>
发布
</view>
<view class="action text-gray">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="icon-my">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
我的
@@ -108,16 +108,16 @@
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action text-orange">
<view class="icon-favorfill"></view> 已收藏
<view class="cuIcon-favorfill"></view> 已收藏
</view>
<view class="action">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
@@ -126,13 +126,13 @@
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
@@ -142,16 +142,16 @@
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view>
客服
</button>
<view class="action">
<view class=" icon-shop"></view> 店铺
<view class=" cuIcon-shop"></view> 店铺
</view>
<view class="action">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
@@ -162,12 +162,12 @@
</view>
<view class="cu-bar bg-white tabbar border shop">
<button class="action" open-type="contact">
<view class="icon-service text-green">
<view class="cuIcon-service text-green">
<view class="cu-tag badge"></view>
</view> 客服
</button>
<view class="action">
<view class="icon-cart">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
@@ -180,7 +180,7 @@
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>标题操作条</text>
</view>
</view>
@@ -249,27 +249,27 @@
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-titles text-green"></text>
<text class="cuIcon-titles text-green"></text>
<text class="text-xl text-bold">关于我们</text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>顶部操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-back text-gray"></text> 返回
<text class="cuIcon-back text-gray"></text> 返回
</view>
<view class="content text-bold">
操作条
@@ -277,19 +277,19 @@
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-homefill text-gray"></text> 首页
<text class="cuIcon-homefill text-gray"></text> 首页
</view>
<view class="content text-bold">
鲜亮的高饱和色彩，专注视觉的小程序组件库
</view>
<view class="action">
<text class="icon-cardboardfill text-grey"></text>
<text class="icon-recordfill text-red"></text>
<text class="cuIcon-cardboardfill text-grey"></text>
<text class="cuIcon-recordfill text-red"></text>
</view>
</view>
<view class="cu-bar bg-blue">
<view class="action">
<text class="icon-close"></text> 关闭
<text class="cuIcon-close"></text> 关闭
</view>
<view class="content text-bold">
海蓝
@@ -301,20 +301,20 @@
ColorUI
</view>
<view class="action">
<text class="icon-more"></text>
<text class="cuIcon-more"></text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>搜索操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar search bg-white">
<view class="search-form round">
<text class="icon-search"></text>
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
@@ -324,39 +324,39 @@
<view class="cu-bar search bg-white">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></view>
<view class="search-form round">
<text class="icon-search"></text>
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="icon-triangledownfill"></text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar bg-red search">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></view>
<view class="search-form radius">
<text class="icon-search"></text>
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text>广州</text>
<text class="icon-triangledownfill"></text>
<text class="cuIcon-triangledownfill"></text>
</view>
</view>
<view class="cu-bar bg-cyan search">
<view class="search-form radius">
<text class="icon-search"></text>
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
</view>
<view class="action">
<text class="icon-close"></text>
<text class="cuIcon-close"></text>
<text>取消</text>
</view>
</view>
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>操作条按钮组</text>
</view>
</view>
@@ -375,29 +375,29 @@
</view>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-green"></text>
<text class="cuIcon-title text-green"></text>
<text>输入操作条</text>
</view>
</view>
<view class="box">
<view class="cu-bar input">
<view class="action">
<text class="icon-sound text-grey"></text>
<text class="cuIcon-sound text-grey"></text>
</view>
<input class="solid-bottom" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>
<view class="cu-bar input">
<view class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></view>
<view class="action">
<text class="icon-roundaddfill text-grey"></text>
<text class="cuIcon-roundaddfill text-grey"></text>
</view>
<input class="solid-bottom" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow-blur">发送</button>
</view>

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

@@ -1,7 +1,7 @@
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">卡片</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class='action'>
<text class='icon-titles text-orange '></text> 案例类卡片
<text class='cuIcon-titles text-orange '></text> 案例类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -24,9 +24,9 @@
<view class="text-gray text-sm flex justify-between">
十天前
<view class="text-gray text-sm">
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
<text class="cuIcon-messagefill margin-lr-xs"></text> 30
</view>
</view>
</view>
@@ -37,7 +37,7 @@
</view>
<view class="cu-bar bg-white solid-bottom {{isCard?'margin-top':''}}">
<view class='action'>
<text class='icon-titles text-orange '></text> 动态类卡片
<text class='cuIcon-titles text-orange '></text> 动态类卡片
</view>
<view class='action'>
<switch class='sm' checked='{{isCard}}' bindchange='isCard'></switch>
@@ -64,9 +64,9 @@
</view>
</view>
<view class="text-gray text-sm text-right padding">
<text class="icon-attentionfill margin-lr-xs"></text> 10
<text class="icon-appreciatefill margin-lr-xs"></text> 20
<text class="icon-messagefill margin-lr-xs"></text> 30
<text class="cuIcon-attentionfill margin-lr-xs"></text> 10
<text class="cuIcon-appreciatefill margin-lr-xs"></text> 20
<text class="cuIcon-messagefill margin-lr-xs"></text> 30
</view>
<view class="cu-list menu-avatar comment solids-top">
<view class="cu-item">
@@ -85,8 +85,8 @@
<view class="margin-top-sm flex justify-between">
<view class="text-gray text-df">2018年12月4日</view>
<view>
<text class="icon-appreciatefill text-red"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
<text class="cuIcon-appreciatefill text-red"></text>
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
@@ -107,8 +107,8 @@
<view class="margin-top-sm flex justify-between">
<view class="text-gray text-df">2018年12月4日</view>
<view>
<text class="icon-appreciate text-gray"></text>
<text class="icon-messagefill text-gray margin-left-sm"></text>
<text class="cuIcon-appreciate text-gray"></text>
<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
</view>
</view>
</view>
@@ -118,7 +118,7 @@
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-titles text-orange '></text> 文章类卡片
<text class='cuIcon-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

@@ -20,7 +20,7 @@
<view class="date "> 13:23</view>
</view>
<view class="cu-info">
<text class="icon-roundclosefill text-red "></text> 对方拒绝了你的消息
<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
</view>
<view class="cu-info">
对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
@@ -39,7 +39,7 @@
3"
</view>
<view class="content shadow">
<text class="icon-sound text-xxl padding-right-xl"> </text>
<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
</view>
</view>
<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
@@ -48,7 +48,7 @@
<view class="cu-item self">
<view class="main">
<view class="action">
<text class="icon-locationfill text-orange text-xxl"></text>
<text class="cuIcon-locationfill text-orange text-xxl"></text>
</view>
<view class="content shadow">
喵星球，喵喵市
@@ -64,20 +64,20 @@
@#$^&**
</view>
<view class="action text-grey">
<text class="icon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
</view>
</view>
<view class="date">13:23</view>
</view>
</view>
<view class="cu-bar foot input" style="bottom:{{InputBottom}}px">
<view class="cu-bar foot input {{InputBottom!=0?'cur':''}}" style="bottom:{{InputBottom}}px">
<view class="action">
<text class="icon-sound text-grey"></text>
<text class="cuIcon-sound text-grey"></text>
</view>
<input class="solid-bottom" bindfocus="InputFocus" bindblur="InputBlur" adjust-position="{{false}}" focus="{{false}}" maxlength="300" cursor-spacing="10"></input>
<view class="action">
<text class="icon-emojifill text-grey"></text>
<text class="cuIcon-emojifill text-grey"></text>
</view>
<button class="cu-btn bg-green shadow">发送</button>
</view>

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

@@ -1,153 +1,159 @@
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
<view slot="backText">返回</view>
<view slot="content">表单</view>
<view slot="backText">返回</view>
<view slot="content">表单</view>
</cu-custom>
<form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
<input placeholder="两字短标题"></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="输入框带个图标"></input>
<text class="icon-locationfill text-orange"></text>
</view>
<view class="cu-form-group">
<view class="title">验证码</view>
<input placeholder="输入框带个按钮"></input>
<button class="cu-btn bg-green shadow">验证码</button>
</view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="输入框带标签"></input>
<view class="cu-capsule radius">
<view class="cu-tag bg-blue">
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">普通选择</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
<view class="picker">
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">多列选择</view>
<picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">时间选择</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">日期选择</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">地址选择</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
<view class="cu-form-group margin-top">
<view class="title">开关选择</view>
<switch></switch>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<switch class="red sm" checked></switch>
</view>
<view class="cu-form-group">
<switch class="switch-sex" checked></switch>
<view class="title">定义图标</view>
</view>
<view class="cu-form-group">
<view class="title">方形开关</view>
<switch class="orange radius sm" checked></switch>
</view>
<radio-group class="block">
<view class="cu-form-group margin-top">
<view class="title">单选操作(radio)</view>
<radio checked></radio>
</view>
<view class="cu-form-group">
<view class="title">定义样式</view>
<radio class="radio"></radio>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<view>
<radio class="blue radio"></radio>
<radio class="red margin-left-sm"></radio>
</view>
</view>
</radio-group>
<view class="cu-form-group margin-top">
<view class="title">复选选操作(checkbox)</view>
<checkbox></checkbox>
</view>
<view class="cu-form-group">
<view class="title">定义形状</view>
<checkbox class="round" checked></checkbox>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<checkbox class="round blue" checked></checkbox>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="padding-xs bg-img" style="background-image:url({{imgList[index]}})" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="icon-close"></text>
</view>
</view>
<view class="padding-xs solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="icon-cameraadd"></text>
</view>
</view>
</view>
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group margin-top">
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaAValue?'value':''}}" bindinput="textareaAInput"></textarea>
</view>
<view class="cu-form-group top">
<view class="title">点文本框</view>
<textarea data-placeholder="多行文本输入框" maxlength="-1" disabled="{{modalName!=null}}" placeholder-class="placeholder" class="{{textareaBValue?'value':''}}" bindinput="textareaBInput"></textarea>
</view>
</form>
<view class="cu-form-group margin-top">
<view class="title">邮件</view>
<input placeholder="两字短标题"></input>
</view>
<view class="cu-form-group">
<view class="title">输入框</view>
<input placeholder="三字标题"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="统一标题的宽度"></input>
</view>
<view class="cu-form-group">
<view class="title">收货地址</view>
<input placeholder="输入框带个图标"></input>
<text class="cuIcon-locationfill text-orange"></text>
</view>
<view class="cu-form-group">
<view class="title">验证码</view>
<input placeholder="输入框带个按钮"></input>
<button class="cu-btn bg-green shadow">验证码</button>
</view>
<view class="cu-form-group">
<view class="title">手机号码</view>
<input placeholder="输入框带标签"></input>
<view class="cu-capsule radius">
<view class="cu-tag bg-blue">
+86
</view>
<view class="cu-tag line-blue">
中国大陆
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">普通选择</view>
<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}">
<view class="picker">
{{index?picker[index]:'禁止换行，超出容器部分会以 ... 方式截断'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">多列选择</view>
<picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}"
range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">时间选择</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange">
<view class="picker">
{{time}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">日期选择</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange">
<view class="picker">
{{date}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">地址选择</view>
<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
<view class="cu-form-group margin-top">
<view class="title">开关选择</view>
<switch></switch>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<switch class="red sm" checked></switch>
</view>
<view class="cu-form-group">
<switch class="switch-sex" checked></switch>
<view class="title">定义图标</view>
</view>
<view class="cu-form-group">
<view class="title">方形开关</view>
<switch class="orange radius sm" checked></switch>
</view>
<radio-group class="block">
<view class="cu-form-group margin-top">
<view class="title">单选操作(radio)</view>
<radio checked></radio>
</view>
<view class="cu-form-group">
<view class="title">定义样式</view>
<radio class="radio"></radio>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<view>
<radio class="blue radio"></radio>
<radio class="red margin-left-sm"></radio>
</view>
</view>
</radio-group>
<view class="cu-form-group margin-top">
<view class="title">复选选操作(checkbox)</view>
<checkbox></checkbox>
</view>
<view class="cu-form-group">
<view class="title">定义形状</view>
<checkbox class="round" checked></checkbox>
</view>
<view class="cu-form-group">
<view class="title">定义颜色</view>
<checkbox class="round blue" checked></checkbox>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}">
<image src='{{imgList[index]}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
</view>
<view class="cu-form-group margin-top">
<view class="title">头像</view>
<view class="cu-avatar radius bg-gray"></view>
</view>
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<view class="cu-form-group margin-top">
<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="多行文本输入框"></textarea>
</view>
<view class="cu-form-group align-start">
<view class="title">文本框</view>
<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaBInput" placeholder="多行文本输入框"></textarea>
</view>
</form>

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

@@ -4,7 +4,7 @@
<navigator hover-class='none' url="/pages/component/{{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>
<text class='icon-{{item.icon}}'></text>
<text class='cuIcon-{{item.icon}}'></text>
</navigator>
</view>
<view class='cu-tabbar-height'></view>

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

@@ -5,7 +5,7 @@
</cu-custom>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 宫格列表
<text class="cuIcon-title text-orange "></text> 宫格列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="gridModal">设置</button>
@@ -37,7 +37,7 @@
</view>
<view class="cu-list grid col-{{gridCol}} {{gridBorder?'':'no-border'}}">
<view class="cu-item" wx:for="{{iconList}}" wx:key wx:if="{{index<gridCol*2}}">
<view class="icon-{{item.icon}} text-{{item.color}}">
<view class="cuIcon-{{item.icon}} text-{{item.color}}">
<view class="cu-tag badge" wx:if="{{item.badge!=0}}">
<block wx:if="{{item.badge!=1}}">{{item.badge>99?"99+":item.badge}}</block>
</view>
@@ -47,10 +47,10 @@
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 菜单列表
<text class="cuIcon-title text-orange "></text> 菜单列表
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="menuModal">Modal</button>
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="menuModal">设置</button>
</view>
</view>
<view class="cu-modal {{modalName=='menuModal'?'show':''}}" bindtap="hideModal">
@@ -112,7 +112,7 @@
<view class="cu-list menu {{menuBorder?'sm-border':''}} {{menuCard?'card-menu margin-top':''}}">
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-circlefill text-grey"></text>
<text class="cuIcon-circlefill text-grey"></text>
<text class="text-grey">图标 + 标题</text>
</view>
</view>
@@ -124,19 +124,19 @@
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<button class="cu-btn content" open-type="contact">
<text class="icon-btn text-olive"></text>
<text class="cuIcon-btn text-olive"></text>
<text class="text-grey">Open-type 按钮</text>
</button>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
<text class="icon-discoverfill text-orange"></text>
<text class="cuIcon-discoverfill text-orange"></text>
<text class="text-grey">Navigator 跳转</text>
</navigator>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-emojiflashfill text-pink"></text>
<text class="cuIcon-emojiflashfill text-pink"></text>
<text class="text-grey">头像组</text>
</view>
<view class="action">
@@ -151,17 +151,17 @@
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-btn text-green"></text>
<text class="cuIcon-btn text-green"></text>
<text class="text-grey">按钮</text>
</view>
<view class="action">
<button class="cu-btn round bg-green shadow">
<text class="icon-upload"></text> 上传</button>
<text class="cuIcon-upload"></text> 上传</button>
</view>
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-tagfill text-red"></text>
<text class="cuIcon-tagfill text-red"></text>
<text class="text-grey">标签</text>
</view>
<view class="action">
@@ -172,7 +172,7 @@
</view>
<view class="cu-item {{menuArrow?'arrow':''}}">
<view class="content">
<text class="icon-warn text-green"></text>
<text class="cuIcon-warn text-green"></text>
<text class="text-grey">文本</text>
</view>
<view class="action">
@@ -182,9 +182,9 @@
<view class="cu-item">
<view class="content padding-tb-sm">
<view>
<text class="icon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
<text class="cuIcon-clothesfill text-blue margin-right-xs"></text> 多行Item</view>
<view class="text-gray text-sm">
<text class="icon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
<text class="cuIcon-infofill margin-right-xs"></text> 小目标还没有实现！</view>
</view>
<view class="action">
<switch class="switch-sex sm" bindchange="switchSex"></switch>
@@ -193,7 +193,7 @@
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 消息列表
<text class="cuIcon-title text-orange "></text> 消息列表
</view>
</view>
<view class="cu-list menu-avatar">
@@ -203,7 +203,7 @@
<view class="text-grey">凯尔</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
<text class="icon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
<text class="cuIcon-infofill text-red margin-right-xs"></text> 我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。我已天理为凭，踏入这片荒芜，不再受凡人的枷锁遏制。
</text>
</view>
</view>
@@ -222,14 +222,12 @@
<view class="cu-tag round bg-orange sm">战士</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut">
塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。
</text>
<text class="text-cut">塔里克是保护者星灵，用超乎寻常的力量守护着符文之地的生命、仁爱以及万物之美。塔里克由于渎职而被放逐，离开了祖国德玛西亚，前去攀登巨神峰寻找救赎，但他找到的却是来自星界的更高层的召唤。现在的塔里克与古代巨神族的神力相融合，以瓦洛兰之盾的身份，永不疲倦地警惕着阴险狡诈的虚空腐化之力。</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
<view class="cuIcon-notice_forbid_fill text-gray"></view>
</view>
</view>
<view class="cu-item ">
@@ -273,18 +271,18 @@
<view class="cu-tag round bg-orange sm">6人</view>
</view>
<view class="text-gray text-sm flex">
<text class="text-cut"> 伊泽瑞尔：<text class="icon-locationfill text-orange margin-right-xs"></text> 传送中...</text>
<text class="text-cut"> 伊泽瑞尔：<text class="cuIcon-locationfill text-orange margin-right-xs"></text> 传送中...</text>
</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<view class="icon-notice_forbid_fill text-gray"></view>
<view class="cuIcon-notice_forbid_fill text-gray"></view>
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 列表左滑
<text class="cuIcon-title text-orange "></text> 列表左滑
</view>
</view>
<view class="cu-list menu-avatar">
@@ -293,7 +291,7 @@
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red"></text> 消息未送达</view>
<text class="cuIcon-infofill text-red"></text> 消息未送达</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>

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

@@ -4,7 +4,7 @@
</cu-custom>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 普通窗口
<text class="cuIcon-title text-orange "></text> 普通窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Modal">Modal</button>
@@ -15,7 +15,7 @@
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
@@ -26,7 +26,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 底部窗口
<text class="cuIcon-title text-orange "></text> 底部窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="bottomModal">Bottom</button>
@@ -46,7 +46,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 对话窗口
<text class="cuIcon-title text-orange "></text> 对话窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DialogModal1">Dialog</button>
@@ -58,7 +58,7 @@
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
@@ -79,7 +79,7 @@
<view class="cu-bar bg-white justify-end">
<view class="content">Modal标题</view>
<view class="action" bindtap="hideModal">
<text class="icon-close text-red"></text>
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
@@ -87,7 +87,7 @@
</view>
<view class="cu-bar bg-white">
<view class="action margin-0 flex-sub text-green " bindtap="hideModal">
<text class="icon-moneybag"></text>微信支付</view>
<text class="cuIcon-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>
</view>
@@ -96,7 +96,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 图片窗口
<text class="cuIcon-title text-orange "></text> 图片窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="Image">Image</button>
@@ -108,7 +108,7 @@
<view class="bg-img" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg');height:200px;">
<view class="cu-bar justify-end text-white">
<view class="action" bindtap="hideModal">
<text class="icon-close "></text>
<text class="cuIcon-close "></text>
</view>
</view>
</view>
@@ -121,7 +121,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 单选窗口
<text class="cuIcon-title text-orange "></text> 单选窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="RadioModal">Radio</button>
@@ -145,7 +145,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 多选窗口
<text class="cuIcon-title text-orange "></text> 多选窗口
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="ChooseModal">Choose</button>
@@ -169,7 +169,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-orange "></text> 侧边抽屉
<text class="cuIcon-title text-orange "></text> 侧边抽屉
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalL">Left</button>

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

@@ -4,7 +4,7 @@
</view>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-titles text-orange"></text> 默认
<text class="cuIcon-titles text-orange"></text> 默认
</view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
@@ -14,7 +14,7 @@
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 居中
<text class="cuIcon-title text-orange"></text> 居中
</view>
</view>
<scroll-view scroll-x class="bg-white nav text-center">
@@ -24,7 +24,7 @@
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 平分
<text class="cuIcon-title text-orange"></text> 平分
</view>
</view>
<scroll-view scroll-x class="bg-white nav">
@@ -36,7 +36,7 @@
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 背景
<text class="cuIcon-title text-orange"></text> 背景
</view>
</view>
<scroll-view scroll-x class="bg-red nav text-center">
@@ -46,17 +46,17 @@
</scroll-view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 图标
<text class="cuIcon-title text-orange"></text> 图标
</view>
</view>
<scroll-view scroll-x class="bg-green nav text-center">
<view class="cu-item {{0==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="0">
<text class="icon-camerafill"></text> 数码
<text class="cuIcon-camerafill"></text> 数码
</view>
<view class="cu-item {{1==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="1">
<text class="icon-upstagefill"></text> 排行榜
<text class="cuIcon-upstagefill"></text> 排行榜
</view>
<view class="cu-item {{2==TabCur?'text-white cur':''}}" bindtap="tabSelect" data-id="2">
<text class="icon-clothesfill"></text> 皮肤
<text class="cuIcon-clothesfill"></text> 皮肤
</view>
</scroll-view>

12
demo/pages/component/steps/steps.wxml
View File

@@ -1,7 +1,7 @@
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">步骤条</view></cu-custom>
<view class="cu-bar bg-white solid-bottom">
<view class="action">
<text class="icon-title text-orange"></text> 基本用法
<text class="cuIcon-title text-orange"></text> 基本用法
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="basicsSteps">下一步</button>
@@ -10,27 +10,27 @@
<view class="bg-white padding">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-red'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{item.icon}}"></text> {{item.name}}
<text class="cuIcon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps">
<view class="cu-item {{index>basics?'':'text-orange'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{index>basics?'title':item.icon}}"></text> {{item.name}}
<text class="cuIcon-{{index>basics?'title':item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="bg-white padding margin-top-xs">
<view class="cu-steps steps-arrow">
<view class="cu-item {{index>basics?'':'text-blue'}}" wx:for="{{basicsList}}" wx:key>
<text class="icon-{{item.icon}}"></text> {{item.name}}
<text class="cuIcon-{{item.icon}}"></text> {{item.name}}
</view>
</view>
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange"></text> 数字完成
<text class="cuIcon-title text-orange"></text> 数字完成
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="numSteps">下一步</button>
@@ -45,7 +45,7 @@
</view>
<view class="cu-bar bg-white solid-bottom margin-top">
<view class="action">
<text class="icon-title text-orange"></text> 多级显示
<text class="cuIcon-title text-orange"></text> 多级显示
</view>
<view class="action">
<button class="cu-btn bg-green shadow" bindtap="scrollSteps">下一步</button>

4
demo/pages/component/swiper/swiper.js
View File

@@ -7,8 +7,8 @@ Page({
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
}, {
id: 2,
type: 'image',

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

@@ -4,7 +4,7 @@
</cu-custom>
<view class="cu-bar bg-white">
<view class="action">
<text class="icon-title text-pink"></text> 全屏限高轮播
<text class="cuIcon-title text-pink"></text> 全屏限高轮播
</view>
<view class="action">
<switch class="sm" bindchange="DotStyle"></switch>
@@ -18,7 +18,7 @@
</swiper>
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 卡片式轮播
<text class="cuIcon-title text-pink"></text> 卡片式轮播
</view>
</view>
<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">
@@ -32,7 +32,7 @@
<view class="cu-bar bg-white margin-top">
<view class="action">
<text class="icon-title text-pink"></text> 堆叠式轮播
<text class="cuIcon-title text-pink"></text> 堆叠式轮播
</view>
</view>
<view class="tower-swiper" bindtouchmove="towerMove" bindtouchstart="towerStart" bindtouchend="towerEnd">

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

@@ -4,17 +4,17 @@
</cu-custom>
<view class="cu-timeline">
<view class="cu-time">昨天</view>
<view class="cu-item cur icon-noticefill">
<view class="cu-item cur cuIcon-noticefill">
<view class="content bg-green shadow-blur">
<text>22:22</text> 【广州市】快件已到达地球
</view>
</view>
<view class="cu-item text-red icon-attentionforbidfill">
<view class="cu-item text-red cuIcon-attentionforbidfill">
<view class="content bg-red shadow-blur">
这是第一次，我家的铲屎官走了这么久。久到足足有三天！！
</view>
</view>
<view class="cu-item text-grey icon-evaluate_fill">
<view class="cu-item text-grey cuIcon-evaluate_fill">
<view class="content bg-grey shadow-blur">
这是第一次，我家的铲屎官走了这么久。
</view>
@@ -57,7 +57,7 @@
<view class="content">
<view class="text-grey">文晓港</view>
<view class="text-gray text-sm">
<text class="icon-infofill text-red"></text> 消息未送达</view>
<text class="cuIcon-infofill text-red"></text> 消息未送达</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
@@ -73,11 +73,11 @@
<view class="cu-tag round orange sm">SVIP</view>
</view>
<view class="text-gray text-sm">
<text class="icon-redpacket_fill text-red"></text> 收到红包</view>
<text class="cuIcon-redpacket_fill text-red"></text> 收到红包</view>
</view>
<view class="action">
<view class="text-grey text-xs">22:20</view>
<text class="icon-notice_forbid_fill text-gray"></text>
<text class="cuIcon-notice_forbid_fill text-gray"></text>
</view>
</view>
</view>