# 基本样式

TIP

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

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

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

减少书写代码编辑器的移动次数，提高开发效率
减少书写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-* 分别对应width 和 height ，这里的*取值规则如下：

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-100P 和 pi-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的取值为 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>

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的取值为 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>

1
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>

1
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>

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：圆形

定位 →