# 基本样式
TIP
为了提高页面开发过程中的效率,piui预设了大量日常开发中常用的样式类
使用过程中可通过为标签添加class的方式完成绝大部分样式的开发
推荐您认真阅读 源码 (opens new window) ,可以深入理解每一个样式类的含义
- 减少书写代码编辑器的移动次数,提高开发效率
- 减少书写style,复用class,可以有效减少代码体积,提高代码性能
<template>
<view class="pi-fz-24" />
</template>
2
3
# 容器
pi-container
:用于没有scroll-view时候的容器,默认铺满整个视窗,y轴内容溢出滚动
pi-scroll-container
:用于scroll-view时候的容器
pi-scroll
:滚动视区
# 宽高
通过 pi-w-*
和 pi-h-*
分别对应width
和 height
,这里的*取值规则如下:
1-100(可以等于100)之间的偶数(双数)
<template>
<view class="pi-w-50"/> // 等价于width:50rpx
<view class="pi-h-50"/> // 等价于height:50rpx
</template>
2
3
4
同时,还提供了以下类名,如:
pi-w-100P
对应width:100%
pi-h-100P
对应height:100%
pi-w-100vw
对应width:100vw
pi-h-100vh
对应height:100vh
<template>
<view class="pi-w-100P" /> // 等价于width:100%
<view class="pi-h-100P" /> // 等价于height:100%
<view class="pi-w-100vw" /> // 等价于width:100vw
<view class="pi-h-100vh" /> // 等价于height:100vh
</template>
2
3
4
5
6
需要注意的是,
pi-w-100P
和pi-w-100vw
的类名只有对应100%和100vw的值,使用其他数值或将vw和vh互换将没有效果
# 内边距
通过使用 pi-pd-*
的类名,可对标签快捷设置内边距,效果等价于 padding: *rpx
,*的取值规则同宽高一致
<template>
<view class="pi-pd-20"/> // 等价于padding:20rpx
</template>
2
3
如果用户想单独对某一个或两个方向的内边距进行设置,可使用pi-pd-$x-*
的类名,这里$x的取值为 top
、bottom
、left
、right
、lr
、 tb
,
其中 lr
表示同时设置 left
和 right
, tb
表示同时设置 tob
和 bottom
<template>
<view class="pi-pd-top-10" /> // 等价于padding-top:10rpx
<view class="pi-pd-lr-10" /> // 等价于padding:0 10rpx
<view class="pi-pd-tb-10" /> // 等价于padding:10rpx 0
</template>
2
3
4
5
# 外边距
通过使用 pi-mg-*
的类名,用户可对标签快捷设置外边距,效果等价于 margin:*rpx
,*的取值规则同宽高一致
<template>
<view class="pi-mg-20"/> // 等价于padding:20rpx
</template>
2
3
如果用户想单独对某一个或两个方向的外边距进行设置,可使用pi-mg-$x-*
的类名,这里$x的取值为 top
、bottom
、left
、right
、lr
、tb
,
其中 lr
表示同时设置 left
和 right
,tb
表示同时设置 tob
和 bottom
<template>
<view class="pi-mg-top-10" /> // 等价于margin-top:10rpx
<view class="pi-mg-lr-10" /> // 等价于margin:0 10rpx
<view class="pi-mg-tb-10" /> // 等价于margin:10rpx 0
</template>
2
3
4
5
# 边框
在PIUI中,预设了两种类型的边框相关的类名,分别是 solid
和 dashed
,对应实线和虚线
通过使用 pi-solid-*
或者 pi-dashed-*
即可快速为元素添加边框,这里*的取值规则如下:
1-10(可以等于10)之间的整数
<template>
<view class="pi-solid-1" /> // 等价于border:1px solid $pi-line-color
<view class="pi-dashed-1" /> // 等价于border:1px dashed $pi-line-color
</template>
2
3
4
此处 $pi-line-color
为PIUI内置scss变量,默认值为 #f4f4f4
与内外边距相似,用户可以通过添加 top
、bottom
、left
、 right
的组合方式来对元素单一方向的边框进行设置
<template>
<view class="pi-solid-top-2" /> // 等价于border-top:2px solid $pi-line-color
<view class="pi-dashed-bottom-2" /> // 等价于border-bottom:2px dashed $pi-line-color
</template>
2
3
4
此处$pi-line-color
的值与上面一致
需要注意的是设置边框的类名中无法使用 lr
或者 tb
的方式同时设置两个方向的边框样式,此处与内外边距不同
此外,用户还可以通过 pi-radius-*
的方式为元素设置圆角属性,*的取值规则为:
1-100(可以等于100)之间的偶数(双数)
同时,使用 pi-circle
或者是 pi-radius-round
可以达到 border-radius:50%
的效果
<template>
<view class="pi-radius-4" /> // 等价于border-radius:4rpx
<view class="pi-circle" /> // 等价于border-radius:50%
<view class="pi-radius-round" /> // 等价于border-radius:50%
</template>
2
3
4
5
# 颜色
/**
* 颜色
*/
// 主要颜色
.pi-primary {
color: $pi-primary-color;
}
// 次级颜色
.pi-secondary {
color: $pi-secondary-color;
}
// 第三级颜色
.pi-tertiary {
color: $pi-tertiary-color;
}
// 第四级颜色
.pi-fourth {
color: $pi-fourth-color;
}
// 第五级颜色
.pi-fifth {
color: $pi-fifth-color;
}
// 黑色
.pi-black {
color: #000000;
}
// 白色
.pi-white {
color: #ffffff;
}
// 灰色
.pi-gray {
color: #666666;
}
// 灰色禁用
.pi-gray-disable {
color: #cccccc;
}
// 浅灰色
.pi-light-gray {
color: #999999;
}
/**
* 背景颜色
*/
// 透明背景
.pi-bg-opacity {
background: transparent;
}
// 背景黑色
.pi-bg-black {
color: #ffffff;
background: #000000;
}
// 背景白色
.pi-bg-white {
color: $pi-font-color;
background: #ffffff;
}
// 主要颜色
.pi-bg-primary {
background: $pi-primary-color;
}
// 次级颜色
.pi-bg-secondary {
background: $pi-secondary-color;
}
// 第三级颜色
.pi-bg-tertiary {
background: $pi-tertiary-color;
}
// 第四级颜色
.pi-bg-fourth {
background: $pi-fourth-color;
}
// 第五级颜色
.pi-bg-fifth {
background: $pi-fifth-color;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
# 其他
pi-more/more
:右箭头
pi-upload
:文件上传选框
pi-safearea
:安全区域,兼容iphonex
pi-round
:椭圆效果
pi-avatar/pi-circle/pi-radius-round
:圆形
定位 →