ColorUI 簡易文檔

文本

大小

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>

頭像

http://demo.color-ui.com/h5.html#/pages/basics/avatar

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}

布局

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>

標題條

http://demo.color-ui.com/h5.html#/pages/component/bar

標簽頁

<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
  <view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(i,k) in tabs" :key="k" @tap="tabSelect" :data-id="k">
    滑動{{k}}
  </view>
</scroll-view>


<scroll-view scroll-x class="bg-white nav text-center">
  <view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(i,k) in tabs" :key="k" @tap="tabSelect" :data-id="k">
    居中{{k}}
  </view>
</scroll-view>


<scroll-view scroll-x class="bg-white nav">
  <view class="flex text-center">
    <view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(i,k) in tabs" :key="k" @tap="tabSelect" :data-id="k">
      平分{{k}}
    </view>
  </view>
</scroll-view>

<script>
  export default {
    data() {
      return {
        TabCur: 0,
        scrollLeft: 0,
        tabs: []
      };
    },
    methods: {
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
      }
    }
  }
</script>

模態(tài)框

http://demo.color-ui.com/h5.html#/pages/component/modal

<view @tap="showModal" data-target="Modal">開啟</view>
<view @tap="hideModal">關(guān)閉</view>

<view class="cu-modal" :class="modalName=='Modal'?'show':''">
  <view class="cu-dialog">
    居中
  </view>
</view>

<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
  <view class="cu-dialog">
    底部
  </view>
</view>

<script>
  export default {
    data() {
      return {
        modalName: null,
      };
    },
    methods: {
      showModal(e) {
        this.modalName = e.currentTarget.dataset.target
      },
      hideModal(e) {
        this.modalName = null
      },
    }
  }
</script>

表單

http://demo.color-ui.com/h5.html#/pages/component/form

input

https://uniapp.dcloud.io/component/input

<view class="cu-form-group">
  <view class="title">標題名稱</view>
  <input placeholder="統(tǒng)一標題的寬度" name="input"></input>
</view>

<view class="cu-form-group">
  <view class="title">標題名稱</view>
  <input placeholder="統(tǒng)一標題的寬度" name="input"></input>
    <slot>這里可以放圖標+按鈕等</slot>
</view>

.cu-form-group .title {
  min-width: calc(4em + 15px);
}

picker

https://uniapp.dcloud.io/component/picker

<view class="cu-form-group">
  <view class="title">普通選擇</view>
  <picker @change="PickerChange" :value="index" :range="picker">
    <view class="picker">
      {{index>-1?picker[index]:'請選擇'}}
    </view>
  </picker>
</view>

<script>
  export default {
    data() {
      return {
        index: -1,
        picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
      };
    },
    methods: {
      PickerChange(e) {
        this.index = e.detail.value
      },
    }
  }
</script>

.cu-form-group uni-picker .picker {
  text-align: left;
}

time

<view class="cu-form-group">
  <view class="title">時間選擇</view>
  <picker mode="time" :value="time" start="09:01" end="21:01" @change="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" @change="DateChange">
    <view class="picker">
      {{date}}
    </view>
  </picker>
</view>

<script>
  export default {
    data() {
      return {
        time: '12:01',
        date: '2018-12-25',
      };
    },
    methods: {
      TimeChange(e) {
        this.time = e.detail.value
      },
      DateChange(e) {
        this.date = e.detail.value
      },
    }
  }
</script>

switch

https://uniapp.dcloud.io/component/switch

<view class="cu-form-group">
  <view class="title">開關(guān)選擇</view>
  <switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
</view>

<script>
  export default {
    data() {
      return {
        switchA: false,
      };
    },
    methods: {
      SwitchA(e) {
                this.switchA = e.detail.value
            },
    }
  }
</script>

radio

https://uniapp.dcloud.io/component/radio

<radio-group class="block" @change="RadioChange">
  <view class="cu-form-group">
    <view class="title">單選-藍</view>
    <radio :checked="radio=='B'?true:false" value="B"></radio>
  </view>
  <view class="cu-form-group">
    <view class="title">單選-綠</view>
    <radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
  </view>
</radio-group>

<script>
  export default {
    data() {
      return {
        radio: 'A',
      };
    },
    methods: {
      RadioChange(e) {
                this.radio = e.detail.value
            },
    }
  }
</script>

textarea

https://uniapp.dcloud.io/component/textarea

<view class="cu-form-group">
  <textarea maxlength="-1" @input="textareaAInput" placeholder="多行文本輸入框"></textarea>
</view>

<script>
  export default {
    data() {
      return {
        textareaAValue: '',
      };
    },
    methods: {
      textareaAInput(e) {
                this.textareaAValue = e.detail.value
            },
    }
  }
</script>

列表

http://demo.color-ui.com/h5.html#/pages/component/list

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 跳轉(zhuǎn)</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">小目標還沒有實現(xiàn)！</text>
    </view>
  </view>
</view>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 寫在有道筆記上，uni項目實踐，轉(zhuǎn)過來格式不太好看，先做此記錄吧。 看了uniapp多端開發(fā)，感覺不錯，還有模板商...
    YellowPoint閱讀 2,559評論 0贊 1
  • uni-app跨平臺框架官方教程 鏈接：https://ke.qq.com/course/343370 一、框架簡...
    Neyo_涼閱讀 36,671評論 0贊 43
  • 學習導覽 uniapp調(diào)研資料 1.認識vue 2.搭建vue應(yīng)用 3.組件與api 4.生命周期 5.條件編譯 ...
    Man不經(jīng)心閱讀 17,734評論 1贊 6
  • 一.前言 最近在看uni-app的跨平臺開發(fā)方案, 一項新技術(shù)的誕生總會或多或少有點毛病, 所以這篇文章就用來記錄...
    objcat閱讀 1,919評論 0贊 1
  • 久違的晴天，家長會。 家長大會開好到教室時，離放學已經(jīng)沒多少時間了。班主任說已經(jīng)安排了三個家長分享經(jīng)驗。 放學鈴聲...
    飄雪兒5閱讀 7,866評論 16贊 22

友情鏈接更多精彩內(nèi)容