内置样式
捐赠uView
来源:uView
浏览
7899
扫码
2020-05-19 07:48:59
内置样式
说明
文字省略
定位
字体大小
- 数值形式
- 断点形式
文字对齐
内外边距
flex布局
- 总超集
- 子元素是否换行
- 子元素在上下左右的对齐方式
- 子元素空间分布
边框
文字颜色
- 类名方案
- SCSS变量名方案
主题色
内置样式
说明
uView组件功能的实现，并不依赖全局样式，内置的一些类名，只是提供一些基础且常用的样式，仅此而已。
注意：请根据快速上手中的说明，引入uView提供的scss文件。
温馨提示
由于uView的内置样式均是写在scss文件中的，您在使用的时候，请确保要给页面的style标签加上lang=”scss”属性，否则可能会报错。
文字省略
u-line-1,u-line-2,u-line-3,u-line-4,u-line-5五个类名在文字超出内容盒子时，分别只显示一行、两行、三行、四行、五行+省略号。
是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也
定位
uView内置了关于相对和绝对定位的两个类，分别为u-relative(u-rela)和u-absolute(u-abso)：
.u-relative,
.u-rela {
display: relative;
}
.u-absolute,
.u-abso {
display: absolute;
}
字体大小
1. 数值形式
uView为了方便用户写字体，通过SCSS生成了一套样式类，专门用于定位字体的大小。对于字体，不同用户可能有喜欢px，也有喜欢rpx单位的， 一般来说，在uni-app上，rpx单位最终表现出来的大小数值为px的两倍，也就是说，24rpx和12px的字体大小是差不多的。
uView为此提供了一个类u-font-x，这个x为10-40之间(包含10和40)，当x >= 10 && x < 20时，表现为px性质，当x >= 20 && x <= 40时，表现为rpx性质。
用法如下：
当x >= 10 && x < 20时，表现为px性质
这个.u-font-13在uView的内部样式定义为：
.u-font-13 {
font-size: 13px;
}
当x >= 20 && x <= 40时，表现为rpx性质
这个.u-font-26在uView的内部样式定义为：
.u-font-26 {
font-size: 26rpx;
}
2. 断点形式
为了更加形象和方便记忆，uView另外提供了一套断点的字体大小，分别以xs、sm、md、lg、xl作为后缀，如下：
.u-font-xs {
font-size: 22rpx;
}
.u-font-sm {
font-size: 26rpx;
}
.u-font-md {
font-size: 28rpx;
}
.u-font-lg {
font-size: 30rpx;
}
.u-font-xl {
font-size: 34rpx;
}
文字对齐
uView为文字对齐定义了3个类，分别如下：
/ 文字左对齐 /
.u-text-left {
text-align: left;
}
/ 文字居中对齐 /
.u-text-center {
text-align: center;
}
/ 文字右对齐 /
.u-text-right {
text-align: right;
}
内外边距
uView定义了一套内外边距的类名，调用简单，方便用户使用，类似u-padding-x、u-margin-left-x等，这里的x取值规则如下：
1-80(可以等于80)之间的偶数(双数)
能被5除尽的1-80之间的数，如5，10，15，35等
类名的取值有如下：
注意： uView同时也给了一套简写的方法，二者是等价的。
u-padding-x == u-p-x
u-padding-left-x == u-p-l-x
u-padding-top-x == u-p-t-x
u-padding-right-x == u-p-r-x
u-padding-bottom-x == u-p-b-x
u-margin-x == u-m-x
u-margin-left-x == u-m-l-x
u-margin-top-x == u-m-t-x
u-margin-right-x == u-m-r-x
u-margin-bottom-x == u-m-b-x
如果我们想定义26rpx的左外边距：
这个.u-margin-left-26在uView的内部样式定义为：
.u-margin-left-26 {
margin-left: 26rpx;
}
如果我们想要35rpx的内边距：
这个.u-padding-35在uView的内部样式定义为：
.u-padding-35 {
paddingt: 35rpx;
}
flex布局
在看这个部分的时候，请确保您对flex是了解的，否则可以参考阮一峰的flex教程
由于我们经常要使用flex布局，而其中的大部分样式又都是重复的，总是少不了如下的几句：
/ 父盒子 /
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
/ 子元素 /
flex: 1;
基于以上，uView定义了一个最常用的总集合类，名为u-flex，其内部值如下：
1. 总超集
.u-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}
2. 子元素是否换行
/ 换行 /
.u-flex-wrap {
flex-wrap: wrap;
}
/ 不换行 /
.u-flex-nowrap {
flex-wrap: nowrap;
}
提示
当我们写这些跟flex相关的类名时，总应该把u-flex写在class多个类名的左边，因为u-flex是一个集合类，如果你不想要其中的某个属性，如flex-wrap: wrap ，可以通过右边的类名覆盖它。
覆盖u-flex中的flex-wrap: wrap(换行)，改为不换行u-flex-nowrap：
……
最终内部表现如下(其它以此类推)：
.u-flex {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
}
/ 由于flex-wrap: nowrap在后面，故覆盖了”u-flex”的flex-wrap: wrap /
.u-flex-nowrap {
flex-wrap: nowrap;
}
- 子元素在上下左右的对齐方式
这里类名的命名依据为，col为column(列，竖向)的缩写，row为行的意思(横向)，所以就有垂直方向上的诸如u-col-center表 垂直居中对齐，u-col-left代表水平左对齐。
此类名控制的是子元素，是需要写在父元素盒子上的：
/ 垂直居中 /
.u-col-center {
align-items: center;
}
/ 顶部对齐 /
.u-col-top {
align-items: flex-start;
}
/ 底部对齐 /
.u-col-bottom {
align-items: flex-end;
}
/ 左边对齐 /
.u-row-left {
justify-content: flex-start;
}
/ 水平居中 /
.u-row-center {
justify-content: center;
}
/ 右边对齐 /
.u-row-right {
justify-content: flex-end;
}
/ 水平两端对齐，项目之间的间隔都相等 /
.u-row-between {
justify-content: space-between;
}
/ 水平每个项目两侧的间隔相等，所以项目之间的间隔比项目与父元素两边的间隔大一倍 /
.u-row-around {
justify-content: space-around;
}
- 子元素空间分布
此类名是写在子元素的class中的，主要用于决定子元素占据的父元素的空间大小，类名为u-flex-x，x的取值为x >= 1 && x <= 12：
.u-flex-1 {
flex: 1;
}
.u-flex-2 {
flex: 2;
}
.u-flex-3 {
flex: 3;
}
/ …… /
.u-flex-12 {
flex: 12;
}
边框
uni-app，iOS和少数设备使用1rpx是能够得到类似0.5px的半像素宽度的，但是某些情况下是不兼容的， 故uView提供了一套兼容的css类名，方便用户使用。
u-border表示给元素添加四周的边框，u-border-top为上边框，u-border-right为右边框， u-border-bottom为下边框，u-border-left为左边框。
说明：如果想调整边框与内容的距离，修改元素的内边距即可。
夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外
文字颜色
uView提供了四个关于文字的颜色，具体详见文档的Color 色彩部分，分别是：
main-color主要颜色，可以用于标题等需要重颜色的场景
content-color内容颜色，可以用于一般性内容的场景
tips-color提示颜色，可以用于浅颜色的提示语的场景
light-color为比tips-color更浅的颜色，可以和tips-color搭配使用
举个例子：
我们平时看到的APP的新闻列表，标题颜色可以用$u-main-color，简介部分颜色可以用$u-content-color，底部的发布时间文字等可以用$u-tips-color。
- 类名方案
这个方案，直接通过类名调用，有这几个对应类名：u-main-color、u-content-color、u-tips-color、u-light-color。
……
- SCSS变量名方案
uView提供了四个关于文字颜色的scss变量名，具体详见文档的Color 色彩部分，分别是：
$u-main-color
$u-content-color
$u-tips-color
$u-light-color
<!— 请确保在style标签声明了”l
我的书签
添加书签
移除书签
