ColorUI CSS Library

The cu-custom component provides a customizable navigation bar.

1. Configure System Info

In App.vue, use onLaunch to capture system information (like status bar height) and attach it to the Vue prototype. This is necessary for the component to position itself correctly across different platforms (Android, iOS, WeChat, Alipay).

2. Disable System Navigation Bar

In pages.json, set navigationStyle to custom globally:

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

3. Register the Component

In main.js, import and register the component:

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

4. Usage

Use the component in your .vue pages. You can pass background classes and control the back button via props, and use slots for text content.

Props:

Slots:

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
  <block slot="backText">返回</block>
  <block slot="content">导航栏</block>
</cu-custom>

ColorUI provides a way to implement custom navigation bars by disabling the system default and using the cu-custom component.

1. Disable System Navigation

In your pages.json, set navigationStyle to custom within globalStyle.

2. Initialize System Information

You must capture system information (like status bar height) in App.vue and attach it to the Vue prototype so the custom component can calculate correct offsets for different platforms (WeChat, Alipay, etc.).

3. Register the Component

In main.js, import and register the cu-custom component globally.

4. Use the Component

Use the <cu-custom> component in your page files. You can customize the background, back button behavior, and content via props and slots.

// pages.json
"globalStyle": {
    "navigationStyle": "custom"
}

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

<!-- page.vue -->
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">导航栏</block>
</cu-custom>

To use ColorUI in a native mini-program (e.g., WeChat Mini Program):

1. Integration

• Existing Project: Download the source, extract /demo, and copy the /colorui folder to your project root. Import main.wxss and icon.wxss in App.wxss.
• New Project: Download the source, extract /template, and rename the /template folder to your project name. Import this into your development tools.

2. Configure Navigation

In App.json, disable the system navigation bar and register the component globally:

"window": {
  "navigationStyle": "custom"
},
"usingComponents": {
  "cu-custom":"/colorui/components/cu-custom"
}

3. Capture System Info

In App.js, use onLaunch to store StatusBar and CustomBar dimensions in globalData to ensure the custom bar aligns with the system's menu button area.

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* Your project css */
....

In a WeChat Mini Program environment, the app.js file uses the App() constructor to initialize global state. The demo implementation uses onLaunch to perform two main tasks:

1. Cloud Initialization: If wx.cloud is available, it initializes the cloud environment with traceUser: true.
2. System Layout Calculation: It uses wx.getSystemInfo and wx.getMenuButtonBoundingClientRect to calculate dimensions for custom navigation bars. It stores these in globalData to ensure consistent UI rendering across pages.

Key properties stored in globalData:

• StatusBar: The height of the status bar.
• Custom: The bounding client rect of the menu button (capsule).
• CustomBar: The calculated height/offset required for a custom navigation bar.

Additionally, globalData contains a ColorList array which serves as a reference for the theme's color palette.

App({
  onLaunch: function() {
    if (wx.cloud) {
      wx.cloud.init({
        traceUser: true
      })
    }
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
          this.globalData.Custom = capsule;
          this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
          this.globalData.CustomBar = e.statusBarHeight + 50;
        }
      }
    })
  },
  globalData: {
    ColorList: [
      { title: '嫣红', name: 'red', color: '#e54d42' },
      // ... other colors
    ]
  }
})