molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-06-08 23:33:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.1.2

Browse Source
This commit is contained in:
Weilanwl
2019-03-28 23:08:35 +08:00
parent 89817a88e8
commit bb889509c0
108 changed files with 3446 additions and 4082 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/basics/layout/layout.js
-1
View File
@@ -1,7 +1,6 @@
const app = getApp();
Page({
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
TabCur:0,
tabNav: ['Flex布局', 'Grid布局', '辅助布局']
demo/pages/basics/layout/layout.wxml
+60 -68
View File
@@ -1,10 +1,4 @@
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-blue" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 布局
</navigator>
</view>
</view>
<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"><view slot="backText">返回</view><view slot="content">布局</view></cu-custom>
<scroll-view scroll-x class="bg-white nav text-center fixed" style="top:{{CustomBar}}px">
<view class="cu-item {{index==TabCur?'text-blue cur':''}}" wx:for="{{tabNav}}" wx:key bindtap='tabSelect' data-id="{{index}}">
{{tabNav[index]}}
@@ -12,94 +6,94 @@
</scroll-view>
<block wx:if="{{TabCur==0}}">
<view class="cu-bar bg-white solid-bottom margin-top">
<view class='action'>
<text class='icon-title text-blue'></text>固定尺寸
<view class="action">
<text class="icon-title text-blue"></text>固定尺寸
</view>
</view>
<view class="padding bg-white">
<view class="flex flex-wrap">
<view class='basis-xs bg-grey margin-xs padding-sm radius'>xs(20%)</view>
<view class='basis-df'></view>
<view class='basis-sm bg-grey margin-xs padding-sm radius'>sm(40%)</view>
<view class='basis-df'></view>
<view class='basis-df bg-grey margin-xs padding-sm radius'>sub(50%)</view>
<view class='basis-lg bg-grey margin-xs padding-sm radius'>lg(60%)</view>
<view class='basis-xl bg-grey margin-xs padding-sm radius'>xl(80%)</view>
<view class="basis-xs bg-grey margin-xs padding-sm radius">xs(20%)</view>
<view class="basis-df"></view>
<view class="basis-sm bg-grey margin-xs padding-sm radius">sm(40%)</view>
<view class="basis-df"></view>
<view class="basis-df bg-grey margin-xs padding-sm radius">sub(50%)</view>
<view class="basis-lg bg-grey margin-xs padding-sm radius">lg(60%)</view>
<view class="basis-xl bg-grey margin-xs padding-sm radius">xl(80%)</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>比例布局
<view class="action">
<text class="icon-title text-blue"></text>比例布局
</view>
</view>
<view class="padding bg-white">
<view class="flex">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
</view>
<view class="flex p-xs margin-bottom-sm mb-sm">
<view class='flex-sub bg-grey padding-sm margin-xs radius'>1</view>
<view class='flex-twice bg-grey padding-sm margin-xs radius'>2</view>
<view class='flex-treble bg-grey padding-sm margin-xs radius'>3</view>
<view class="flex-sub bg-grey padding-sm margin-xs radius">1</view>
<view class="flex-twice bg-grey padding-sm margin-xs radius">2</view>
<view class="flex-treble bg-grey padding-sm margin-xs radius">3</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>水平对齐(justify)
<view class="action">
<text class="icon-title text-blue"></text>水平对齐(justify)
</view>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding justify-start">
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding justify-end">
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding justify-center">
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
<view class="flex solid-bottom padding justify-between">
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class='bg-grey padding-sm margin-xs radius'>between</view>
<view class="bg-grey padding-sm margin-xs radius">between</view>
<view class="bg-grey padding-sm margin-xs radius">between</view>
</view>
<view class="flex solid-bottom padding justify-around">
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class='bg-grey padding-sm margin-xs radius'>around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
<view class="bg-grey padding-sm margin-xs radius">around</view>
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>垂直对齐(align)
<view class="action">
<text class="icon-title text-blue"></text>垂直对齐(align)
</view>
</view>
<view class="bg-white">
<view class="flex solid-bottom padding align-start">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>start</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">start</view>
</view>
<view class="flex solid-bottom padding align-end">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>end</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">end</view>
</view>
<view class="flex solid-bottom padding align-center">
<view class='bg-grey padding-lg margin-xs radius'>ColorUi</view>
<view class='bg-grey padding-sm margin-xs radius'>center</view>
<view class="bg-grey padding-lg margin-xs radius">ColorUi</view>
<view class="bg-grey padding-sm margin-xs radius">center</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==1}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等分列
<view class="action">
<text class="icon-title text-blue"></text>等分列
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<view class="bg-white padding">
<view class="grid col-{{index+1}} margin-bottom text-center" wx:for="{{5}}" wx:key>
@@ -107,75 +101,73 @@
</view>
</view>
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>等高
<view class="action">
<text class="icon-title text-blue"></text>等高
</view>
<view class='action'></view>
<view class="action"></view>
</view>
<view class="bg-white padding">
<view class="grid col-4 grid-square">
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://image.weilanwl.com/img/square-{{index+1}}.jpg);"></view>
<view class="bg-img" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view>
</view>
</view>
</block>
<block wx:if="{{TabCur==2}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>浮动
<view class="action">
<text class="icon-title text-blue"></text>浮动
</view>
</view>
<view class="bg-white padding">
<view class=" cf padding-sm">
<view class='bg-grey radius fl padding-sm'>ColorUi fl</view>
<view class='bg-grey radius fr padding-sm'>ColorUi fr</view>
<view class="bg-grey radius fl padding-sm">ColorUi fl</view>
<view class="bg-grey radius fr padding-sm">ColorUi fr</view>
</view>
</view>
</block>
<block wx:if="{{TabCur==3}}">
<view class="cu-bar bg-white margin-top solid-bottom">
<view class='action'>
<text class='icon-title text-blue'></text>内外边距
<view class="action">
<text class="icon-title text-blue"></text>内外边距
</view>
</view>
<view class="bg-white">
<view class='padding bg-gray'>{size}的尺寸有xs/sm/df/lg/xl</view>
<view class='flex flex-wrap padding solid-top'>
<view class="padding bg-gray">{size}的尺寸有xs/sm/df/lg/xl</view>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">外边距</view>
<view class="basis-df padding-bottom-xs">内边距</view>
<view class="basis-df">.margin-{size}</view>
<view class="basis-df">.padding-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">水平方向外边距</view>
<view class="basis-df padding-bottom-xs">水平方向内边距</view>
<view class="basis-df">.margin-lr-{size}</view>
<view class="basis-df">.padding-lr-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">垂直方向外边距</view>
<view class="basis-df padding-bottom-xs">垂直方向内边距</view>
<view class="basis-df">.margin-tb-{size}</view>
<view class="basis-df">.padding-tb-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">上外边距</view>
<view class="basis-df padding-bottom-xs">上内边距</view>
<view class="basis-df">.margin-top-{size}</view>
<view class="basis-df">.padding-top-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">右外边距</view>
<view class="basis-df padding-bottom-xs">右内边距</view>
<view class="basis-df">.margin-right-{size}</view>
<view class="basis-df">.padding-right-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">下外边距</view>
<view class="basis-df padding-bottom-xs">下内边距</view>
<view class="basis-df">margin-bottom-{size}</view>
<view class="basis-df">.padding-bottom-{size}</view>
</view>
<view class='flex flex-wrap padding solid-top'>
<view class="flex flex-wrap padding solid-top">
<view class="basis-df padding-bottom-xs">左外边距</view>
<view class="basis-df padding-bottom-xs">左内边距</view>
<view class="basis-df">.margin-left-{size}</view>
demo/pages/basics/layout/layout.wxss
+1 -1
View File
@@ -1,3 +1,3 @@
page{
padding-top: 45px;
padding-top: 90rpx;
}