# 基本样式

TIP

为了提高页面开发过程中的效率,piui预设了大量日常开发中常用的样式类

使用过程中可通过为标签添加class的方式完成绝大部分样式的开发

推荐您认真阅读 源码 (opens new window) ,可以深入理解每一个样式类的含义

  1. 减少书写代码编辑器的移动次数,提高开发效率
  2. 减少书写style,复用class,可以有效减少代码体积,提高代码性能
<template>
  <view class="pi-fz-24" />
</template>
1
2
3

# 容器

pi-container:用于没有scroll-view时候的容器,默认铺满整个视窗,y轴内容溢出滚动

pi-scroll-container:用于scroll-view时候的容器

pi-scroll:滚动视区

示例参考

# 宽高

通过 pi-w-*pi-h-* 分别对应widthheight ,这里的*取值规则如下:

1-100(可以等于100)之间的偶数(双数)

<template>
  <view class="pi-w-50"/> // 等价于width:50rpx
  <view class="pi-h-50"/> // 等价于height:50rpx
</template>
1
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>
1
2
3
4
5
6

需要注意的是,pi-w-100Ppi-w-100vw 的类名只有对应100%和100vw的值,使用其他数值或将vw和vh互换将没有效果

# 内边距

通过使用 pi-pd-* 的类名,可对标签快捷设置内边距,效果等价于 padding: *rpx ,*的取值规则同宽高一致

<template>
  <view class="pi-pd-20"/> // 等价于padding:20rpx
</template>
1
2
3

如果用户想单独对某一个或两个方向的内边距进行设置,可使用pi-pd-$x-*的类名,这里$x的取值为 topbottomleftrightlrtb ,

其中 lr 表示同时设置 leftrighttb 表示同时设置 tobbottom

<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>
1
2
3
4
5

# 外边距

通过使用 pi-mg-* 的类名,用户可对标签快捷设置外边距,效果等价于 margin:*rpx ,*的取值规则同宽高一致

<template>
  <view class="pi-mg-20"/> // 等价于padding:20rpx
</template>
1
2
3

如果用户想单独对某一个或两个方向的外边距进行设置,可使用pi-mg-$x-*的类名,这里$x的取值为 topbottomleftrightlrtb ,

其中 lr 表示同时设置 leftrighttb 表示同时设置 tobbottom

<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>
1
2
3
4
5

# 边框

在PIUI中,预设了两种类型的边框相关的类名,分别是 soliddashed ,对应实线和虚线

通过使用 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>
1
2
3
4

此处 $pi-line-color 为PIUI内置scss变量,默认值为 #f4f4f4

与内外边距相似,用户可以通过添加 topbottomleftright 的组合方式来对元素单一方向的边框进行设置

<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>
1
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>
1
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;
}
1
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:圆形

Last updated: 2021/9/27 上午10:31:47