ColorUI 使用文档

ColorUI 简易 使用文档

• 友情链接
• 文本大小
• 颜色
• 图片
• 头像
• 边距
• 辅助样式
• 阴影
• 布局
• 列表

友情链接

ColorUI使用文档

看云： https://www.kancloud.cn/als24/color/1141392

ColorUI H5

H5： http://demo.color-ui.com/h5.html#/

参考文章链接

简书： https://www.jianshu.com/p/450527d7239a#comments

文本大小

xs	sm	df	lg	xl	xxl	sl	xsl
20upx	24upx	28upx	32upx	36upx	44upx	80upx	120upx
10px	12px	14px	16px	18px	22px	40px	60px

/* 大小 */
.text-xs{font-size:20upx}
.text-sm{font-size:24upx}
.text-df{font-size:28upx}
.text-lg{font-size:32upx}
.text-xl{font-size:36upx}
.text-xxl{font-size:44upx}
.text-sl{font-size:80upx}
.text-xsl{font-size:120upx}

/* 特殊 */
.text-Abc{text-transform:Capitalize}
.text-ABC{text-transform:Uppercase}
.text-abc{text-transform:Lowercase}
.text-price::before{content:"¥";font-size:80%;margin-right:4upx}
.text-cut{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.text-bold{font-weight:700}
.text-center{text-align:center}
.text-content{line-height:1.6}
.text-left{text-align:left}
.text-right{text-align:right}

颜色

文字颜色

.line-red,.lines-red,.text-red{color:#e54d42}
.line-orange,.lines-orange,.text-orange{color:#f37b1d}
.line-yellow,.lines-yellow,.text-yellow{color:#fbbd08}
.line-olive,.lines-olive,.text-olive{color:#8dc63f}
.line-green,.lines-green,.text-green{color:#39b54a}
.line-cyan,.lines-cyan,.text-cyan{color:#1cbbb4}
.line-blue,.lines-blue,.text-blue{color:#0081ff}
.line-purple,.lines-purple,.text-purple{color:#6739b6}
.line-mauve,.lines-mauve,.text-mauve{color:#9c26b0}
.line-pink,.lines-pink,.text-pink{color:#e03997}
.line-brown,.lines-brown,.text-brown{color:#a5673f}
.line-grey,.lines-grey,.text-grey{color:#8799a3}
.line-gray,.lines-gray,.text-gray{color:#aaa}
.line-black,.lines-black,.text-black{color:#333}
.line-white,.lines-white,.text-white{color:#fff}

背景颜色

.bg-red{background-color:#e54d42;color:#fff}
.bg-orange{background-color:#f37b1d;color:#fff}
.bg-yellow{background-color:#fbbd08;color:#333}
.bg-olive{background-color:#8dc63f;color:#fff}
.bg-green{background-color:#39b54a;color:#fff}
.bg-cyan{background-color:#1cbbb4;color:#fff}
.bg-blue{background-color:#0081ff;color:#fff}
.bg-purple{background-color:#6739b6;color:#fff}
.bg-mauve{background-color:#9c26b0;color:#fff}
.bg-pink{background-color:#e03997;color:#fff}
.bg-brown{background-color:#a5673f;color:#fff}
.bg-grey{background-color:#8799a3;color:#fff}
.bg-gray{background-color:#f0f0f0;color:#333}
.bg-black{background-color:#333;color:#fff}
.bg-white{background-color:#fff;color:#666}

.light{}

.bg-gradual-red{background-image:linear-gradient(45deg,#f43f3b,#ec008c);color:#fff}
.bg-gradual-orange{background-image:linear-gradient(45deg,#ff9700,#ed1c24);color:#fff}
.bg-gradual-green{background-image:linear-gradient(45deg,#39b54a,#8dc63f);color:#fff}
.bg-gradual-purple{background-image:linear-gradient(45deg,#9000ff,#5e00ff);color:#fff}
.bg-gradual-pink{background-image:linear-gradient(45deg,#ec008c,#6739b6);color:#fff}
.bg-gradual-blue{background-image:linear-gradient(45deg,#0081ff,#1cbbb4);color:#fff}

图片

<view class="bg-img bg-mask" style="background-image: url('')">
  遮罩
</view>

<view class="bg-img" style="background-image: url('')">
  透明
</view>

<view class="bg-img" style="background-image: url()"></view>
<view class="bg-img" :style="'background-image: url(' + i.img + ')'"></view>

头像

round	radius	sm	df	lg	xl
圆	圆角	48upx	64upx	96upx	128upx
		24px	32px	48px	64px

<view class="cu-avatar"></view>

<view class="cu-avatar">文字图标</view>

<view class="cu-avatar"><text>图标</text></view>

<view class="cu-avatar" style="background-image: url()"></view>
<view class="cu-avatar" :style="'background-image: url(' + i.img + ')'"></view>

<!-- 其他 -->

边距

xs	sm	df	lg	xl
10upx	20upx	30upx	40upx	50upx
5px	10px	15px	20px	25px

margin

.margin-0{margin:0}
.margin-xs{margin:10upx}
.margin-sm{margin:20upx}
.margin{margin:30upx}
.margin-lg{margin:40upx}
.margin-xl{margin:50upx}
.margin-top-xs{margin-top:10upx}
.margin-top-sm{margin-top:20upx}
.margin-top{margin-top:30upx}
.margin-top-lg{margin-top:40upx}
.margin-top-xl{margin-top:50upx}
.margin-right-xs{margin-right:10upx}
.margin-right-sm{margin-right:20upx}
.margin-right{margin-right:30upx}
.margin-right-lg{margin-right:40upx}
.margin-right-xl{margin-right:50upx}
.margin-bottom-xs{margin-bottom:10upx}
.margin-bottom-sm{margin-bottom:20upx}
.margin-bottom{margin-bottom:30upx}
.margin-bottom-lg{margin-bottom:40upx}
.margin-bottom-xl{margin-bottom:50upx}
.margin-left-xs{margin-left:10upx}
.margin-left-sm{margin-left:20upx}
.margin-left{margin-left:30upx}
.margin-left-lg{margin-left:40upx}
.margin-left-xl{margin-left:50upx}
.margin-lr-xs{margin-left:10upx;margin-right:10upx}
.margin-lr-sm{margin-left:20upx;margin-right:20upx}
.margin-lr{margin-left:30upx;margin-right:30upx}
.margin-lr-lg{margin-left:40upx;margin-right:40upx}
.margin-lr-xl{margin-left:50upx;margin-right:50upx}
.margin-tb-xs{margin-top:10upx;margin-bottom:10upx}
.margin-tb-sm{margin-top:20upx;margin-bottom:20upx}
.margin-tb{margin-top:30upx;margin-bottom:30upx}
.margin-tb-lg{margin-top:40upx;margin-bottom:40upx}
.margin-tb-xl{margin-top:50upx;margin-bottom:50upx}

padding

.padding-0{padding:0}
.padding-xs{padding:10upx}
.padding-sm{padding:20upx}
.padding{padding:30upx}
.padding-lg{padding:40upx}
.padding-xl{padding:50upx}
.padding-top-xs{padding-top:10upx}
.padding-top-sm{padding-top:20upx}
.padding-top{padding-top:30upx}
.padding-top-lg{padding-top:40upx}
.padding-top-xl{padding-top:50upx}
.padding-right-xs{padding-right:10upx}
.padding-right-sm{padding-right:20upx}
.padding-right{padding-right:30upx}
.padding-right-lg{padding-right:40upx}
.padding-right-xl{padding-right:50upx}
.padding-bottom-xs{padding-bottom:10upx}
.padding-bottom-sm{padding-bottom:20upx}
.padding-bottom{padding-bottom:30upx}
.padding-bottom-lg{padding-bottom:40upx}
.padding-bottom-xl{padding-bottom:50upx}
.padding-left-xs{padding-left:10upx}
.padding-left-sm{padding-left:20upx}
.padding-left{padding-left:30upx}
.padding-left-lg{padding-left:40upx}
.padding-left-xl{padding-left:50upx}
.padding-lr-xs{padding-left:10upx;padding-right:10upx}
.padding-lr-sm{padding-left:20upx;padding-right:20upx}
.padding-lr{padding-left:30upx;padding-right:30upx}
.padding-lr-lg{padding-left:40upx;padding-right:40upx}
.padding-lr-xl{padding-left:50upx;padding-right:50upx}
.padding-tb-xs{padding-top:10upx;padding-bottom:10upx}
.padding-tb-sm{padding-top:20upx;padding-bottom:20upx}
.padding-tb{padding-top:30upx;padding-bottom:30upx}
.padding-tb-lg{padding-top:40upx;padding-bottom:40upx}
.padding-tb-xl{padding-top:50upx;padding-bottom:50upx}

辅助样式

实线

.solid,

.solid-top,

.solid-right,

.solid-bottom,

.solid-left

虚线

。dashed

阴影

翘边阴影：shadow-warp
长阴影： shadow-blur

布局

flex

.flex{display:flex}

/* 对齐 */
.justify-start{justify-content:flex-start}
.justify-end{justify-content:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.align-start{align-items:flex-start}
.align-end{align-items:flex-end}
.align-center{align-items:center}
.align-stretch{align-items:stretch}

/* 其他 */
.flex-direction{flex-direction:column}
.flex-wrap{flex-wrap:wrap}

/* 固定尺寸 */
.basis-xs{flex-basis:20%}
.basis-sm{flex-basis:40%}
.basis-df{flex-basis:50%}
.basis-lg{flex-basis:60%}
.basis-xl{flex-basis:80%}

/* 比例分布*/
.flex-sub{flex:1}
.flex-twice{flex:2}
.flex-treble{flex:3}

/* 自对齐 */
.self-start{align-self:flex-start}
.self-center{align-self:flex-center}
.self-end{align-self:flex-end}
.self-stretch{align-self:stretch}
.align-stretch{align-items:stretch}

grid

col-1	col-2	col-3	col-4	col-5
1等分列	2等分列	3等分列	4等分列	5等分列

<view class="grid col-2">
    <view>等分</view>
  <view></view>
</view>

<view class="grid col-2 grid-square">
    <view>等高</view>
  <view></view>
</view>

列表

sm-border	card-menu	arrow
短边框	卡片	箭头

<view class="cu-list menu">
  <view class="cu-item">
    <view class="content">
      <text class="cuIcon-circlefill text-grey"></text>
      <text class="text-grey">图标 + 标题</text>
    </view>
  </view>
  
  <view class="cu-item">
    <view class="content">
      <image src="/static/logo.png" class="png" mode="aspectFit"></image>
      <text class="text-grey">图片 + 标题</text>
    </view>
  </view>
  
  <view class="cu-item">
    <button class="cu-btn content" open-type="contact">
      <text class="cuIcon-btn text-olive"></text>
      <text class="text-grey">Open-type 按钮</text>
    </button>
  </view>
  
  <view class="cu-item">
    <navigator class="content" hover-class="none" url="../list/list" open-type="redirect">
      <text class="cuIcon-discoverfill text-orange"></text>
      <text class="text-grey">Navigator 跳转</text>
    </navigator>
  </view>
  
  <view class="cu-item">
    <view class="content">
      <text class="cuIcon-warn text-green"></text>
      <text class="text-grey">文本</text>
    </view>
    <view class="action">
      <text class="text-grey text-sm">小目标还没有实现！</text>
    </view>
  </view>
</view>