ColorUI 使用文档

绝地灬酷狼 2022-09-03 07:20 902阅读 0赞

# ColorUI 简易 使用文档 #

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

## 友情链接 ##

### ColorUI使用文档 ###

看云： [https://www.kancloud.cn/als24/color/1141392][https_www.kancloud.cn_als24_color_1141392]

### ColorUI H5 ###

H5： [http://demo.color-ui.com/h5.html\#/][http_demo.color-ui.com_h5.html]

### 参考文章链接 ###

简书： [https://www.jianshu.com/p/450527d7239a\#comments][https_www.jianshu.com_p_450527d7239a_comments]

## 文本大小 ##

/* 大小 */
    .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}

## 图片 ##

## 头像 ##

<table> 
 <thead> 
  <tr> 
   <th>round</th> 
   <th>radius</th> 
   <th>sm</th> 
   <th>df</th> 
   <th>lg</th> 
   <th>xl</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>圆</td> 
   <td>圆角</td> 
   <td>48upx</td> 
   <td>64upx</td> 
   <td>96upx</td> 
   <td>128upx</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
   <td>24px</td> 
   <td>32px</td> 
   <td>48px</td> 
   <td>64px</td> 
  </tr> 
 </tbody> 
</table>

## 边距 ##

### 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 ###

## 列表 ##

<table> 
 <thead> 
  <tr> 
   <th>sm-border</th> 
   <th>card-menu</th> 
   <th>arrow</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>短边框</td> 
   <td>卡片</td> 
   <td>箭头</td> 
  </tr> 
 </tbody> 
</table>

<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>

[https_www.kancloud.cn_als24_color_1141392]: https://www.kancloud.cn/als24/color/1141392
[http_demo.color-ui.com_h5.html]: http://demo.color-ui.com/h5.html#/
[https_www.jianshu.com_p_450527d7239a_comments]: https://www.jianshu.com/p/450527d7239a#comments