forked from weilanwl/coloruicss
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of https://github.com/weilanwl/ColorUI
- Loading branch information
Showing
1 changed file
with
158 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,158 @@ | ||
<p align="center"> <a href="https://www.color-ui.com/" target="_blank"> <img src="https://image.weilanwl.com/colorui/githubHead1223.png" alt="" style="max-width:100%;" width="580"> </a> </p> | ||
<h2>简介</h2> | ||
<p>hi!开发者!ColorUI迎来了2.0的升级,相比之前的版本,2.0版本重构了基础代码,增加了更多的配色,这是一个全新的小程序UI解决方案。</p> | ||
<p>ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!</p> | ||
<p>项目为个人开源项目,如果项目有帮到你,希望能支持下开发者。</p> | ||
<p align="center"><img src="https://image.weilanwl.com/colorui/githubMiniPorgam.jpg" alt="" style="max-width:100%;" width="800"></p> | ||
<h2>使用</h2> | ||
<p>下载源码包可得到 <strong>Demo</strong> 和 <strong>Template</strong> 两个项目, <strong>Demo</strong> 包含所有组件源码。 <strong>Template</strong> 是一个已经引用了ColorUI的空白模板。<strong>Demo</strong> 即文档。<a href="https://www.color-ui.com/" target="_blank">在线文档</a> 编写中...</p> | ||
<h2>交流</h2> | ||
<p>微信群:加入微信群请先添加开发者微信,备注GitHub。QQ群:240787041 或扫描二维码。</p> | ||
<p align="center"><img src="https://image.weilanwl.com/colorui/githubQrcode.jpg" alt="" style="max-width:100%;" width="748"></p> | ||
<h2>赞赏</h2> | ||
<p align="center"><img src="https://image.weilanwl.com/colorui/githubAppreciate.jpg" alt="" style="max-width:100%;" width="600"></p> | ||
<p style="text-align: center;"><img src="https://image.weilanwl.com/uni/UniAppReadme.jpg" alt="ColorUI简介"></img></p> | ||
|
||
## 前言 | ||
ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。 | ||
## 交流 | ||
微信群:加入微信群请先添加开发者微信,备注UniApp插件市场。QQ群:240787041 或扫描二维码。 | ||
<p align="center"><img src="https://image.weilanwl.com/colorui/githubQrcode.jpg" alt="" style="max-width:100%;" width="748"></p> | ||
|
||
## 素材 | ||
ColorUI在语雀有个群友共同在维护的知识库,里面有一些群友改的模板和UI素材供开发使用哦! | ||
[语雀-ColorUI群资源](https://www.yuque.com/colorui) | ||
|
||
## 使用UniApp开发 | ||
### 开始 | ||
下载源码解压获得`/Colorui-UniApp`文件夹,复制目录下的 `/colorui` 文件夹到你的项目根目录 | ||
|
||
`App.vue` 引入关键Css `main.css` `icon.css` | ||
``` | ||
<style> | ||
@import "colorui/main.css"; | ||
@import "colorui/icon.css"; | ||
@import "app.css"; /* 你的项目css */ | ||
.... | ||
</style> | ||
``` | ||
|
||
### 使用自定义导航栏 | ||
导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。 | ||
|
||
`App.vue` 获得系统信息 | ||
``` | ||
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 | ||
} | ||
}) | ||
}, | ||
``` | ||
|
||
`pages.json` 配置取消系统导航栏 | ||
``` | ||
"globalStyle": { | ||
"navigationStyle": "custom" | ||
}, | ||
``` | ||
复制代码结构可以直接使用,注意全局变量的获取。 | ||
|
||
使用封装,在`main.js` 引入 `cu-custom` 组件。 | ||
``` | ||
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> | ||
``` | ||
| 参数 | 作用 |类型 | 默认值 | | ||
| -------- | -----: |-----: | :----: | | ||
| bgColor | 背景颜色类名 |String | '' | | ||
| isBack | 是否开启返回 | Boolean | false | | ||
| bgImage | 背景图片路径 | String | '' | | ||
|
||
| slot块 | 作用 | | ||
| -------- | -----: | | ||
| backText | 返回时的文字 | | ||
| content | 中间区域 | | ||
| right | 右侧区域(小程序端可使用范围很窄!) | | ||
|
||
## 使用原生小程序开发 | ||
### 从现有项目开始 | ||
下载源码解压获得`/demo`,复制目录下的 `/colorui` 文件夹到你的项目根目录 | ||
|
||
`App.wxss` 引入关键Css `main.wxss` `icon.wxss` | ||
``` | ||
@import "colorui/main.wxss"; | ||
@import "colorui/icon.wxss"; | ||
@import "app.css"; /* 你的项目css */ | ||
.... | ||
``` | ||
|
||
### 从新项目开始 | ||
下载源码解压获得`/template`,复制`/template`并重命名为你的项目,导入到小程序开发工具既可以开始你的新项目了 | ||
|
||
### 使用自定义导航栏 | ||
导航栏作为常用组件有做简单封装,当然你也可以直接复制代码结构自己修改,达到个性化目的。 | ||
|
||
`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":"/colorui/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 | 右侧区域(小程序端可使用范围很窄!) | | ||
|
||
## 赞赏 | ||
<p align="center"><img src="https://image.weilanwl.com/colorui/githubAppreciate.jpg" alt="" style="max-width:100%;" width="600"></p> | ||
|
||
|
||
|