Introduction to the

ColorUI is a Css class UI component library! Not a Js framework. ColorUI focuses more on visual interaction than similar applets libraries!

Browse GitHub:https://github.com/weilanwl/ColorUI

How to use it?

Download the source package first

– making

Into my little program

Copy colorui. WXSS and icon. WXSS under /demo/ to the root directory of the applet

Introduce two files in app.wxss

@import "icon.wxss";
@import "colorui.wxss";
Copy the code

New development using templates

Copy /template/ folder and rename it to your project. Import it as a small program to use ColorUI

Experience immersive navigation

App.js gets the system parameters and writes the global parameters.

//App.js
App({
  onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        letcustom = wx.getMenuButtonBoundingClientRect(); this.globalData.Custom = custom; this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; }})}})Copy the code

Page. Js Page configuration to obtain global parameters.

//Page.js
const app = getApp()
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom
  }  
})
Copy the code

Page. WXML Page constructs navigation. For more navigation styles, download Demo to see the action bar component.

<view class="cu-custom" style="height:{{CustomBar}}px;">
  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px; padding-top:{{StatusBar}}px;">
    <navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px; height:{{Custom.height}}px; margin-left:calc(750rpx - {{Custom.right}}px)'>
      <text class='icon-back'></text>
      <text class='icon-homefill'></text>
    </navigator>
    <view class='content' style='top:{{StatusBar}}px; '</view> </view>Copy the code

Custom system Tabbar

Configure tabBar according to the official custom tabBar (use the latest version of development tools and version libraries).

Using ColorUI to configure a Tabbar requires only changing the contents of the Wxml page. For more Tabbar styles, download the Demo to see the action bar component.

/custom-tab-bar/index.wxml

 <view class="cu-bar tabbar bg-white shadow">
  <view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view class='icon-cu-image'>
      <image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
    </view>
    <view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
  </view>
</view>
Copy the code

The author on

ColorUI is a highly customized Css style library that contains elements and components commonly used for development, and elements and components can be nested with each other. I will also occasionally update some extensions to the source code.

Thanks for reading.