Color UI CSS

https://github.com/weilanwl/coloruicss
Admin
ColorUI is a CSS library that provides components and styles for developing user interfaces,...
Tokens:1,423
Snippets:12
Trust Score:5.2
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Using Custom Navbar Component in Native Mini Program Page

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

Example usage of the `cu-custom` component in a native Mini Program page (`.wxml` file). Configure its appearance and behavior using attributes like `bgColor` and `isBack`, and define content using named slots (`backText`, `content`). Note the use of `{{true}}` for boolean attributes.

```wxml
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
  <view slot="backText">返回</view>
  <view slot="content">导航栏</view>
</cu-custom>
```

--------------------------------

### Getting System Info for Custom Navbar in Native Mini Program

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

Acquire system information like status bar height and custom menu button position in the `onLaunch` function of `App.js` to correctly calculate and set the custom navigation bar height. Store these values in the globalData object for access throughout the application.

```javascript
onLaunch: function() {
  wx.getSystemInfo({
    success: e => {
      this.globalData.StatusBar = e.statusBarHeight;
      let custom = wx.getMenuButtonBoundingClientRect();
      this.globalData.Custom = custom;  
      this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    }
  })
},
```

--------------------------------

### Using Custom Navbar Component in UniApp Page

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

Example usage of the `cu-custom` component in a UniApp page (`.vue` file). Configure its appearance and behavior using props like `bgColor` and `isBack`, and define content using named slots (`backText`, `content`).

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

--------------------------------

### Getting System Info for Custom Navbar in UniApp

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

Acquire system information like status bar height and custom menu button position in the `onLaunch` function of `App.vue` to correctly calculate and set the custom navigation bar height across different platforms (Android, iOS, WeChat Mini Program, Alipay Mini Program). These values are typically stored on the Vue prototype.

```javascript
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
    }
  })
},
```

--------------------------------

### Importing ColorUI CSS in Native Mini Program

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

To use ColorUI styles in a native Mini Program project, import the main ColorUI CSS files (`main.wxss`, `icon.wxss`) and your project's custom CSS (`app.css`) within the `@import` rules in your `App.wxss` file.

```css
@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```

--------------------------------

### Example JavaScript Output from Prettier

Source: https://github.com/weilanwl/coloruicss/blob/master/Colorui-UniApp/node_modules/prettier/README.md

This snippet shows the result of running the previous JavaScript input through Prettier. It demonstrates how Prettier formats the code by wrapping arguments onto new lines to adhere to a maximum line length rule.

```JavaScript
foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);
```

--------------------------------

### Configuring Custom Navigation and Global Components in Native Mini Program App.json

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

To use a custom navigation bar component, set `navigationStyle` to `custom` in the `window` object of `App.json`. Also, globally register the `cu-custom` component using the `usingComponents` object to make it available in all pages.

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

--------------------------------

### Importing ColorUI CSS in UniApp

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

To use ColorUI styles in a UniApp project, import the main ColorUI CSS files (`main.css`, `icon.css`) and your project's custom CSS (`app.css`) within the `<style>` block of your `App.vue` file.

```css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>
```

--------------------------------

### Registering Custom Navbar Component in UniApp main.js

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

Globally register the `cu-custom` component provided by ColorUI in your `main.js` file so it can be used directly in any page component without local import.

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

--------------------------------

### Example JavaScript Input for Prettier

Source: https://github.com/weilanwl/coloruicss/blob/master/Colorui-UniApp/node_modules/prettier/README.md

This snippet shows an example of unformatted JavaScript code that Prettier is designed to process. It features a function call with multiple long arguments on a single line.

```JavaScript
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
```

--------------------------------

### Configuring Custom Navigation Style in UniApp pages.json

Source: https://github.com/weilanwl/coloruicss/blob/master/README.md

To use a custom navigation bar component instead of the native one provided by the system, set the `navigationStyle` property to `custom` within the `globalStyle` object in your `pages.json` file.

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

--------------------------------

### Markdown Code for Prettier Badge

Source: https://github.com/weilanwl/coloruicss/blob/master/Colorui-UniApp/node_modules/prettier/README.md

This snippet provides the Markdown code necessary to display the 'code style: prettier' badge, linking back to the Prettier GitHub repository. This is commonly used in project README files.

```Markdown
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
```
Tokens:
Raw