colorui
colorui下载并引用下载源码解压,复制根目录的 /colorui 文件夹到你的根目录App.vue 引入关键Css main.css icon.css<style>@import "colorui/main.css";@import "colorui/icon.css";@import "app.css"; /* 你的项目css */...
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)