ColorUI Documentation (Updating)

 

1. Start

Download the source code and extract it to get the /Colorui-UniApp folder, copy the /colorui folder in the directory to your project root directory

App.vue introduces key Css main.css icon.css

<style>
    /* Introduce colorui main body */
    @import "colorui/main.css";
    /* Introduce colorui icon class resources */
    @import "colorui/icon.css";
</style>

 

2. Use a custom navigation bar

(1) App.vue obtains system information

onLaunch: function() {
    uni.getSystemInfo({
        success: function(e) {
            // #ifndef MP
            Vue.prototype.StatusBar = e.statusBarHeight;
            if (e.platform == 'android') {
                Vue.prototype.CustomBar = e.statusBarHeight + 50;
            } else {
                Vue.prototype.CustomBar = e.statusBarHeight + 45;
            };
            // #endif
            // #ifdef MP-WEIXIN
            Vue.prototype.StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            Vue.prototype.Custom = custom;
            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            // #endif        
            // #ifdef MP-ALIPAY
            Vue.prototype.StatusBar = e.statusBarHeight;
            Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
            // #endif
        }
    })
},

(2) The pages.json configuration cancels the system navigation bar

"globalStyle": {
    "navigationStyle": "custom"
},

(3) Using encapsulation, introduce the cu-custom component in main.js.

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

 

(4) can be used directly in the page

<cu-custom bgColor="bg-gradual-blue" :isBack="true"><view slot="backText">return</view><view slot="content">icon</view></cu-custom>

 

 

 

 

3.flex layout ("|" means or, the same is involved later)

The class of the parent container needs to be added to flex

(1) Fixed size (add basis-xs|sm|sub|lg|xl to the class)

    

E.g:
                <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>

(2) Proportional layout (add flex-sub|twice|treble to the class)

    

E.g:
1:1
                <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>
1:2
                <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>
1:2:3
                <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>

(3) Horizontal alignment (justify-start|end|center|between|around is added to the class of the parent container)

    

E.g:
                <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>
                <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>
                <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>
                <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>
                <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>

(4) Vertical alignment (add align-start|end|center to the class of the parent container)

    

 

 

 

E.g:
                <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>
                <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>
                <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>

 

4.Grid layout

(1) Equally divided columns (class is added to grid col-1|2|3|...)

    

    

                <view class="grid margin-bottom text-center" v-for="(item,index) in 5"
                 :key="index" :class="'col-' + (index+1)">
                    <view class="padding" :class="indexs%2==0?'bg-cyan':'bg-blue'"
                     v-for="(item,indexs) in (index+1)*2" :key="indexs">
                     {{indexs+1}}
                    </view>
                </view>

 

Try it yourself:

        <view class="grid margin-bottom text-center col-5">
            <view class="padding bg-cyan">{{1}}</view>
            <view class="padding bg-cyan">{{2}}</view>
            <view class="padding bg-cyan">{{3}}</view>
        </view>

 

 

(2) Equal height (add grid col-4|5|... grid-square to the class)

    

          <view class="grid col-4 grid-square">                    
            <view class="bg-img" v-for="(item,index) in avatar" :key="index" :style="[{ backgroundImage:'url(' + avatar[index] + ')' }]"></view>
          </view> data(){return{ avatar:['https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'] }}

5. Auxiliary layout

(1) Floating (add fl|fr to the class and cf to the parent container class)

    

 

 

(2) Inside and outside margins

    size=xs|sm|df|lg|xl

Margin margin-{size}
padding padding-{size}
horizontal margin margin-lr-{size}
horizontal padding padding-lr-{size}
vertical margin margin-tb-{size}
vertical padding padding-tb-{size}
top margin margin-top-{size}
top padding padding-top-{size}
right margin margin-right-{size}
right padding padding-right-{size}
bottom margin margin-bottom-{size}
bottom padding padding-bottom-{size}
left margin margin-left-{size}
left padding padding-left-{size}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

6. Icon (add cuIcon-pepole|check|... to the class)

E.g

<text class="cuIcon-people"></text>

 

 

 

 

 

7. Background

(1) When you want a dark background,

Add bg-Red|Orange|...

 

  <view class="padding radius text-center shadow-blur" :class="'bg-' + name"></view> 

 

  

(2) When you want a light-colored background,

Add bg-Red|Orange|... to the class,

Add light to the class

  <view class="padding radius text-center light" :class="'bg-' + name"></view>

 

  

(3) When you want a gradient background,

Add bg-gradual-red|orange|... to the class,

                <view class="bg-gradual-red padding radius text-center shadow-blur">
                    <view class="text-lg">Charm Red</view>
                    <view class="margin-top-sm text-Abc">#f43f3b - #ec008c</view>
                </view>

  

(4) When you want a background image,

Add bg-img bg-mask to class

        <view class="bg-img bg-mask flex align-center"
         style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
            <view class="padding-xl text-white">
                <view class="padding-xs text-xxl text-bold">
                    Wings of Steel
                </view>
                <view class="padding-xs text-lg">
                    Only the guilty need fear me.
                </view>
            </view>
        </view>

 

(5) When the text needs a transparent background

Add bg-shadeBottom|shadeTop to the class

            <view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
                <view class="bg-shadeTop padding padding-bottom-xl">
                    start above
                </view>
            </view>
            <view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
                <view class="bg-shadeBottom padding padding-top-xl flex-sub">
                    start below
                </view>
            </view>

 

  

 

 

 

8. Text

(1) Text size

.text-xsl Text size 60px for extra large display such as icons and numbers

.text-sl Text size 40px for larger display of icons, numbers, etc.

.text-xxl The text size is 22px for information such as the amount and number

.text-xl Text size 18px Page title, used for single information pages such as result pages

.text-lg Text size 16px Small title of the page, the first-level display content

.text-df Text size 14px The default font size of the page, used for summaries or reading text

.text-sm Text size 12px Page auxiliary information, secondary content, etc.

.text-xs Text size 10px Description text, label text and other text with low attention

(2) Text color (add text-red|orange|... to the class) Color reference 7. Background

(3) Text shadow (add text-shadow to the class)

(4) Text truncation ... (add text-cut to the class, to give the container width)

(5) Text alignment (add text-center|left|right to the class)

(6) Special characters

 

  text-price Price¥

text-Abc English words are capitalized

text-abc All English letters are lowercase

text-ABC All capital letters

 

9. Button

 

(1) Button shape

cu-btn (default) cu-btn round (rounded corners) cu-btn cuIcon (icon button)

    

            <button class="cu-btn">default</button>
            <button class="cu-btn round">rounded corners</button>
            <button class="cu-btn cuIcon">
                <text class="cuIcon-emojifill"></text>
            </button>

 

 

(2) Button size

cu-btn sm (small size) cu-btn (default) cu-btn lg (large size)

 

(3) Button color

    bg-red|...

shadow shadow

(4) Button hollow

lines-red|... (deep border) line-red|... (light border)

 

(5) Button block

    cu-btn lg

 

(6) The button is invalid

    disabled

 

(7) Button plus icon

    

            <button class="cu-btn block line-orange lg">
                <text class="cuIcon-upload"></text> icon</button>
            <button class="cu-btn block bg-blue margin-tb-sm lg">
                <text class="cuIcon-loading2 cuIconfont-spin"></text> load</button>
            <button class="cu-btn block bg-black margin-tb-sm lg" loading> native loading</button>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Posted by kee2ka4 on Sat, 21 May 2022 22:19:22 +0300