Colour UI(简易)开发文档

GitHub地址:https://github.com/weilanwl/ColorUI/
在线文档(编写中):https://www.color-ui.com/

鉴于常用前端框架Colour UI并没有官方开发文档,以下整理了常用基本元素的常用标签,省去翻找代码样例的时间:

布局

<view class="flex flex-wrap">
      <view class="basis-xs">xs(20%)</view>
      <view class="basis-sm">sm(40%)</view>
      <view class="basis-df">sub(50%)</view>
      <view class="basis-lg">lg(60%)</view>
      <view class="basis-xl">xl(80%)</view>
</view>
<view class="flex">
      <view class="flex-sub">1</view>
      <view class="flex-twice">2</view>
      <view class="flex-treble">3</view>
</view>

等高

// col控制每行显示的个数。例:col-4每行显示4个,col-3每行显示3个,col-2每行显示2个
<view class="grid col-3 grid-square flex-sub">
    <view class="bg-img" v-for="(item,index) in imgs" :key="index">
        <image :src="item" mode="aspectFill"></image>
    </view>
</view>

文本

icon

<text class="cuIcon-title text-blue"></text>

常用标签:

text-black text-bold text-center text-lg text-xs text-shadow text-right

按钮

<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
<button class="cu-btn line">镂空</button>
<button class="cu-btn icon">
 <text class="cuIcon-emojifill"></text>
</button>
<button class="cu-btn block bg-blue margin-tb-sm lg" disabled type="">无效状态</button>

常用标签:

cu-btn round sm lg bg-red block line-orange

间距

{size}的尺寸有xs/sm/df/lg/xl

常用标签:

padding-lg padding-bottom-xs padding-lr-xs margin-lg margin-bottom-lg margin-lr-xs

背景色

bg-white bg-gray bg-red bg-gradual-red

 1,310 total views,  8 views today

Revisions

Comments are closed.