uniapp中uview框架内置样式
说明
uView组件功能的实现,并不依赖全局样式,内置的一些类名,只是提供一些基础且常用的样式,仅此而已。
注意:请根据快速上手中的说明,引入uView提供的scss文件。
温馨提示
由于uView的内置样式均是写在scss文件中的,您在使用的时候,请确保要给页面的style
标签加上lang="scss"
属性,否则可能会报错。
#文字省略
u-line-1
,u-line-2
,u-line-3
,u-line-4
,u-line-5
五个类名在文字超出内容盒子时,分别只显示一行、两行、三行、四行、五行+省略号。
1 | <view class="u-line-1"> |
#定位
uView内置了关于相对和绝对定位的两个类,分别为u-relative
(u-rela
)和u-absolute
(u-abso
):
1 | .u-relative, |
#字体大小
#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
性质
1 | <view class="u-font-13"></view> |
这个.u-font-13
在uView的内部样式定义为:
1 | .u-font-13 { |
- 当
x >= 20 && x <= 40
时,表现为rpx
性质
1 | <view class="u-font-26"></view> |
这个.u-font-26
在uView的内部样式定义为:
1 | .u-font-26 { |
#2. 断点形式
为了更加形象和方便记忆,uView另外提供了一套断点的字体大小,分别以xs
、sm
、md
、lg
、xl
作为后缀,如下:
1 | .u-font-xs { |
#文字对齐
uView为文字对齐定义了3个类,分别如下:
1 | /* 文字左对齐 */ |
#重置按钮样式 1.6.3
我们知道,uni-app和微信小程序的button
按钮是自带样式的,比如边框,内边距,行高等。在某些特殊场景,我们可能会需要清除这些样式,仅仅只留下按钮文本,就像 单纯的view
元素一样,不带预置样式,场景:
在微信小程序中,我们知道button
设置open-type
参数为getUserInfo
(或者分享场景),点击按钮可以弹出让用户授权的系统弹窗,有时候我们可能需要按钮形式展现,但也有时候我们仅仅需要 “点击登录/授权/分享”几个字,同时具备获取相应的功能,就需要清除按钮的样式了,只需要给button
加上u-reset-button
类名即可。
1 | <button class="u-reset-button">点击登录</button> |
提示:
- 此种场景,不建议使用uView的
u-button
组件,使用原生的button
即可 - 有时候,我们可能弹出询问用户是否想授权,可以用
u-modal
组件,此组件有一个confirm-button
的slot
用于替换确定
按钮,用户点击确定,即可授权。
1 | /* 请在微信开发工具中运行此代码 */ |
#内外边距
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
的左外边距:
1 | <view class="u-margin-left-26"></viwe> |
这个.u-margin-left-26
在uView的内部样式定义为:
1 | .u-margin-left-26 { |
如果我们想要35rpx
的内边距:
1 | <view class="u-padding-35"></viwe> |
这个.u-padding-35
在uView的内部样式定义为:
1 | .u-padding-35 { |
#flex布局
在看这个部分的时候,请确保您对flex
是了解的,否则可以参考阮一峰的flex教程(opens new window)
由于我们经常要使用flex
布局,而其中的大部分样式又都是重复的,总是少不了如下的几句:
1 | /* 父盒子 */ |
基于以上,uView定义了一个最常用的总集合类,名为u-flex
,其内部值如下:
#1. 总超集
1 | .u-flex { |
#2. 子元素是否换行
1 | /* 换行 */ |
提示
当我们写这些跟flex
相关的类名时,总应该把u-flex
写在class
多个类名的左边,因为u-flex
是一个集合类,如果你不想要其中的某个属性,如align-items: center
,可以通过右边的类名覆盖它。
覆盖u-flex
中的align-items: center
(对齐),改为顶部对齐u-col-top
:
1 | <view class="u-flex u-col-top"> |
最终内部表现如下(其它以此类推):
1 | .u-flex { |
#3. 子元素在上下左右的对齐方式
这里类名的命名依据为,col
为column
(列,竖向)的缩写,row
为行的意思(横向),所以就有垂直方向上的诸如u-col-center
表 垂直居中对齐,u-row-left
代表水平左对齐。
此类名控制的是子元素,是需要写在父元素盒子上的:
1 | /* 垂直居中 */ |
#4. 子元素空间分布
此类名是写在子元素的class
中的,主要用于决定子元素占据的父元素的空间大小,类名为u-flex-x
,x
的取值为x >= 1 && x <= 12
:
1 | .u-flex-1 { |
#边框
uni-app,iOS和少数设备使用1rpx
是能够得到类似0.5px
的半像素宽度的,但是某些情况下是不兼容的, 故uView提供了一套兼容的css类名,方便用户使用。u-border
表示给元素添加四周的边框,u-border-top
为上边框,u-border-right
为右边框, u-border-bottom
为下边框,u-border-left
为左边框。
说明:如果想调整边框与内容的距离,修改元素的内边距即可。
1 | <view class="u-border-bottom"> |
#文字颜色
uView提供了四个关于文字的颜色,具体详见文档的Color 色彩部分,分别是:
main-color
主要颜色,可以用于标题等需要重颜色的场景content-color
内容颜色,可以用于一般性内容的场景tips-color
提示颜色,可以用于浅颜色的提示语的场景light-color
为比tips-color
更浅的颜色,可以和tips-color
搭配使用
举个例子:
我们平时看到的APP的新闻列表,标题颜色可以用$u-main-color
,简介部分颜色可以用$u-content-color
,底部的发布时间文字等可以用$u-tips-color
。
#1. 类名方案
这个方案,直接通过类名调用,有这几个对应类名:u-main-color
、u-content-color
、u-tips-color
、u-light-color
。
1 | <view class="u-main-color"> |
#2. SCSS变量名方案
uView提供了四个关于文字颜色的scss变量名,具体详见文档的Color 色彩部分,分别是:
$u-main-color
$u-content-color
$u-tips-color
$u-light-color
1 | <!-- 请确保在style标签声明了"lang="scss"" --> |
#主题色
uView提供五个关于主题的scss颜色变量,如有需要,可合理使用。具体详见文档的Color 色彩部分,分别是:
$u-type-primary
为蓝色,uView的主色彩,代表热情,友好,积极,向上之意。$u-type-warning
为黄色,代表警告之意。$u-type-success
为绿色,代表成功之意。$u-type-error
为红色,代表错误之意。$u-type-info
为灰色,代表一般信息之意。
1 | <style lang="scss" scoped> |
Use this card to join the candyhome and participate in a pleasant discussion together .
Welcome to aqing's candyhome,wish you a nice day .