1 Star 0 Fork 0

零壹工作室 / ColorUI

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

ColorUI简介

前言

ColorUI是一个css库!!!在你引入样式后可以根据class来调用组件,一些含有交互的操作我也有简单写,可以为你开发提供一些思路。

交流

微信群:加入微信群请先添加开发者微信,备注UniApp插件市场。QQ群:240787041 或扫描二维码。

素材

ColorUI在语雀有个群友共同在维护的知识库,里面有一些群友改的模板和UI素材供开发使用哦! 语雀-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 右侧区域(小程序端可使用范围很窄!)

赞赏

MIT License Copyright (c) 2018 weilanwl Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

直接从github导入,解决访问github比较慢的问题 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/wgsuxin/ColorUI.git
git@gitee.com:wgsuxin/ColorUI.git
wgsuxin
ColorUI
ColorUI
master

搜索帮助

14c37bed 8189591 565d56ea 8189591