内置样式
说明
uView组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。
由于uView的内置样式均是写在scss文件中的，您在使用的时候，请确保要给页面的style标签加上lang="scss"属性，否则可能会报错。
文字省略
u-line-1,u-line-2,u-line-3,u-line-4,u-line-5五个类名在文字超出内容盒子时，分别只显示一行、两行、三行、四行、五行+省略号。
<view class="u-margin-10" style="color:red">---------多行文本-----------</view>
<view class="u-line-2">2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行
文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本2行文本</view>
重置按钮样式
我们知道，uni-app和微信小程序的button按钮是自带样式的，比如边框，内边距，行高等。在某些特殊场景，我们可能会需要清除这些样式，仅仅只留下按钮文本，就像 单纯的view元素一样，不带预置样式，场景：
在微信小程序中，我们知道button设置open-type参数为getUserInfo(或者分享场景)，点击按钮可以弹出让用户授权的系统弹窗，有时候我们可能需要按钮形式展现，但也有时候我们仅仅需要 "点击登录/授权/分享"几个字，同时具备获取相应的功能，就需要清除按钮的样式了，只需要给button加上u-reset-button类名即可。
<view class="u-margin-10" style="color:red">---------重置按钮样式-----------</view>
<button class="u-reset-button" @click="login">点击登录</button>
提示：
- 此种场景，不建议使用uView的
u-button组件，使用原生的button即可 - 有时候，我们可能弹出询问用户是否想授权，可以用
u-modal组件，此组件有一个confirm-button的slot用于替换确定按钮，用户点击确定，即可授权。
/* 请在微信开发工具中运行此代码 */
<template>
<view>
<u-modal v-model="show" content="点击确定进行授权">
<button open-type="getUserInfo" class="u-reset-button" slot="confirm-button" @getuserinfo="getuserinfo">确定</button>
</u-modal>
<u-button @click="show = true">打开modal</u-button>
</view>
</template>
<script>
export default {
data() {
return {
show: true
}
},
methods: {
getuserinfo(res) {
console.log(res);
}
}
}
</script>
边框
uni-app，iOS和少数设备使用1rpx是能够得到类似0.5px的半像素宽度的，但是某些情况下是不兼容的， 故uView提供了一套兼容的css类名，方便用户使用。
u-border表示给元素添加四周的边框，u-border-top为上边框，u-border-right为右边框， u-border-bottom为下边框，u-border-left为左边框。
说明：如果想调整边框与内容的距离，修改元素的内边距即可。
<view class="u-border-bottom">
夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
</view>
文字颜色的变量
uView提供了四个关于文字的颜色，具体详见文档的Color 色彩部分，分别是：
main-color主要颜色，可以用于标题等需要重颜色的场景content-color内容颜色，可以用于一般性内容的场景tips-color提示颜色，可以用于浅颜色的提示语的场景light-color为比tips-color更浅的颜色，可以和tips-color搭配使用
举个例子：
我们平时看到的APP的新闻列表，标题颜色可以用$u-main-color，简介部分颜色可以用$u-content-color，底部的发布时间文字等可以用$u-tips-color。
uView提供了四个关于文字颜色的scss变量名，具体详见文档的Color 色彩部分，分别是：
$u-main-color$u-content-color$u-tips-color$u-light-color
<!-- 请确保在style标签声明了"lang="scss"" -->
<style lang="scss" scoped>
.box {
color: $u-main-color;
}
.count {
border-color: $u-light-color;
}
</style>
主题色
uView提供五个关于主题的scss颜色变量，如有需要，可合理使用。具体详见文档的Color 色彩部分，分别是：
$u-primary为蓝色，uView的主色彩，代表热情，友好，积极，向上之意。$u-warning为黄色，代表警告之意。$u-success为绿色，代表成功之意。$u-error为红色，代表错误之意。$u-info为灰色，代表一般信息之意。
<style lang="scss" scoped>
.item {
color: $u-primary;
}
</style>
文字颜色的类
<view class="u-margin-10" style="color:red">---------文字颜色-----------</view>
<text class="u-main-color u-border">maincolor</text>
<text class="u-primary u-border">primary</text>
<text class="u-warning u-border">warning</text>
<text class="u-error u-border">error</text>
文字大小
<view class="u-margin-10" style="color:red">---------字体大小-----------</view>
<text class="u-font-30 u-border">小字</text>
<text class="u-font-40 u-border">中字</text>
<text class="u-font-50 u-border">大字</text>
<text class="u-font-xl u-border">大字</text>
相对和绝对定位
<view class="u-margin-10" style="color:red">---------绝对相对定位-----------</view>
<view class="u-relative">
<u--input
placeholder="请输入搜索内容"
border="surround"
v-model="searchKey"
style="padding-left:40rpx"
></u--input>
<u-icon
name="search"
class="u-absolute"
style="left: 0px; top:20rpx"
size="40rpx"
></u-icon>
</view>
文字对齐
<view class="u-margin-10" style="color:red">---------文字对齐-----------</view>
<view class="u-border u-text-left">左对齐</view>
<view class="u-border u-text-center">居中</view>
<view class="u-border u-text-right">右对齐</view>
内外边距
<view class="u-margin-10" style="color:red">---------内外边距-----------</view>
<view class="u-border u-padding-20" style="height:150rpx;" >
<view class="u-margin-20">
<text class="u-border u-padding-20">
文字1
</text>
<text class="u-border u-padding-20">
文字2
</text>
<text class="u-border u-padding-20">
文字3
</text>
</view>
</view>
flex
<view class="u-margin-10" style="color:red">---------flex-----------</view>
<view class="u-border u-flex u-row-center " style="height:150rpx;" >
<text class="u-border u-padding-20">
文字1
</text>
<text class="u-border u-padding-20">
文字2
</text>
<text class="u-border u-padding-20">
文字3
</text>
</view>
<view class="u-border u-flex u-row-around " style="height:150rpx;" >
<text class="u-border u-padding-20">
文字1
</text>
<text class="u-border u-padding-20">
文字2
</text>
<text class="u-border u-padding-20">
文字3
</text>
</view>
<view class="u-border u-flex u-row-around" style="height:450rpx;flex-direction: column;" >
<text class="u-border u-padding-20">
文字1
</text>
<text class="u-border u-padding-20">
文字2
</text>
<text class="u-border u-padding-20">
文字3
</text>
</view>
<view class="u-border u-flex u-row-around u-flex-wrap u-flex-content-center" style="height:300rpx;" >
<text class="u-border u-padding-20"> 文字1 </text> <text class="u-border u-padding-20"> 文字2 </text> <text class="u-border u-padding-20"> 文字3 </text> <text class="u-border u-padding-20"> 文字4 </text> <text class="u-border u-padding-20"> 文字5 </text> <text class="u-border u-padding-20"> 文字6 </text> <text class="u-border u-padding-20"> 文字7 </text>
</view>
<view class="u-flex u-padding-20" >
<u--input
class="u-flex-1"
placeholder="请输入搜索内容"
border="surround"
v-model="searchKey"
style="padding-left:40rpx"
></u--input>
<u-button type="primary" size="small" text="大小尺寸" style="width:120rpx"></u-button>
</view>
demo下载
参考
https://www.uviewui.com/components/common.html
1209
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
