colorui

colorui

下载并引用

下载源码解压，复制根目录的 /colorui 文件夹到你的根目录
App.vue 引入关键Css main.css icon.css

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

使用colorui导航栏

使用colorui的导航栏需要先取消原生导航栏

pages.json 配置取消系统导航栏

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

使用沉浸式状态栏需要判断并增加高度，并且导入 import Vue from 'vue'，否则可能会

所以一定要导入


import Vue from 'vue'
完整代码为

<script>
	import Vue from 'vue'
	export default {
		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
				}
			})
    }
	}
</script>

页面无论是否为tab所切换的页面，都需要在pages.json中注册

text文字

大小

• text-xsl —— 用于图标、数字等特大显示 60
• text-sl —— 用于图标、数字等较大显示 40
• text-xxl 22
  
• text-xl 18
• text-lg 16
• text-df 14
• text-sm 12
• text-xs 10

示例

<view class="solid-bottom text-sl padding">
     <text class=" cuIcon-roundcheckfill text-green"></text>
</view>

text-price ——用于显示金额

<view class="solid-bottom text-xxl padding">
			<text class="text-price text-red">80.00</text>
</view>

黑度

text-bold —— 页面大标题，用于结果页等单一信息页（加黑的）

<text class="text-black text-bold">您的订单已提交成功！</text>

只引用 text-black 类，字体是黑的，默认字体是灰的

	<text class="text-black">ColorUI组件库</text>

颜色

<view class="text-center" :class="'text-' + item.name">
					{{item.title}}
</view>

ColorList = [{
					title: '嫣红',
					name: 'red',
					color: '#e54d42'
				},
				{
					title: '桔橙',
					name: 'orange',
					color: '#f37b1d'
				},
				{
					title: '明黄',
					name: 'yellow',
					color: '#fbbd08'
				},
				{
					title: '橄榄',
					name: 'olive',
					color: '#8dc63f'
				},
				{
					title: '森绿',
					name: 'green',
					color: '#39b54a'
				},
				{
					title: '天青',
					name: 'cyan',
					color: '#1cbbb4'
				},
				{
					title: '海蓝',
					name: 'blue',
					color: '#0081ff'
				},
				{
					title: '姹紫',
					name: 'purple',
					color: '#6739b6'
				},
				{
					title: '木槿',
					name: 'mauve',
					color: '#9c26b0'
				},
				{
					title: '桃粉',
					name: 'pink',
					color: '#e03997'
				},
				{
					title: '棕褐',
					name: 'brown',
					color: '#a5673f'
				},
				{
					title: '玄灰',
					name: 'grey',
					color: '#8799a3'
				},
				{
					title: '草灰',
					name: 'gray',
					color: '#aaaaaa'
				},
				{
					title: '墨黑',
					name: 'black',
					color: '#333333'
				},
				{
					title: '雅白',
					name: 'white',
					color: '#ffffff'
				},
			]

文字阴影

text-shadow

<view class="text-center text-shadow" :class="'text-' + item.name">
  {{item.title}}
</view>

文字截断

text-cut

文字对齐

<view class="padding bg-white">
			<view class="text-left padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
			<view class="text-center padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
			<view class="text-right padding">我于杀戮之中绽放 ,亦如黎明中的花朵</view>
</view>

效果如下

特殊文字

text-price 价格文本，利用伪元素添加"¥"符号

<text class="text-price">80.00</text>

text-Abc 英文单词首字母大写

<text class="text-Abc">color Ui</text>

text-ABC 全部字母大写

<text class="text-ABC">color Ui</text>

全部字母小写 text-abc

<text class="text-abc">color Ui</text>