# xxmy-color-ui

**Repository Path**: txlong/xxmy-color-ui

## Basic Information

- **Project Name**: xxmy-color-ui
- **Description**: ColorUI是一个非常优秀的css库！！！在你引入样式后可以根据class来调用组件。

  注：fork自 ColorUI 项目，使用实例可参考 wx-miniprogram-demo
- **Primary Language**: CSS
- **License**: ISC
- **Default Branch**: master
- **Homepage**: https://gitee.com/txlong/xxmy-color-ui
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-31
- **Last Updated**: 2021-10-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: xxmy, CSS库, colorUI, 微信小程序

## README

## 前言

ColorUI是一个非常优秀的css库！！！在你引入样式后可以根据class来调用组件。

  注：fork自 [ColorUI](https://github.com/weilanwl/ColorUI) 项目，使用实例可参考[wx-miniprogram-demo](https://gitee.com/txlong/wx-miniprogram-demo)

## 使用原生小程序开发

### 从现有项目开始

```bash
npm install xxmy-color-ui
```

`App.wxss` 引入关键Css `main.wxss` `icon.wxss`
```
@import "miniprogram_npm/xxmy-color-ui/main.wxss";
@import "miniprogram_npm/xxmy-color-ui/icon.wxss";
@import "app.css"; /* 你的项目css */
....
```

### 使用自定义导航栏
导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

`App.js` 获得系统信息
```
 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;
      }
    })
},
```

`App.json` 配置取消系统导航栏,并全局引入组件
```
"window": {
	"navigationStyle": "custom"
},
"usingComponents": {
    "cu-custom": "/miniprogram_npm/xxmy-color-ui/components/cu-custom"
}
```

`page.wxml` 页面可以直接调用了
```
<cu-custom bgColor="bg-gradual-pink" isBack="{{true}}">
	<view slot="backText">返回</view>
	<view slot="content">导航栏</view>
</cu-custom>

```
| 参数       | 作用   |类型    |  默认值 |
| ---   | -----  |-----  | ----  |
| bgColor    | 背景颜色类名 |String  |   ''    |
| isBack     | 是否开启返回 | Boolean |   false |
| isCustom   | 是否开启左侧胶囊 | Boolean |   false |
| bgImage    | 背景图片路径 | String  |  ''     |

| slot块       | 作用   |
| --------   | -----  |
| backText    | 返回时的文字 | 
| content     | 中间区域 | 
| right    | 右侧区域(小程序端可使用范围很窄！)  | 

---

如果你还有其他问题，欢迎关注公众号 「晓晓夢龑」( xiaoxiaomengyan3 )

![xiaoxiaomengyan3](https://gitee.com/txlong/static/raw/master/img/qrcode/qrcode_for_gh_309272258bf6_258.jpg)