其它样式
其它的class样式，可在任何地方组合使用的。
边距
边距样式, class控制。适用于任何组件元素。内边距使用 .p 外边距使用 .m ，可以混用。
内边距
添加 .p-{size} 控制内边距，支持参数 0 ~ 6
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
内单边距
添加 .p{name}-{size} 控制方向内边距，支持边距参数 x、y、t、l、r、b，支持大小参数 0 ~ 6
.px-3
.py-3
.pt-3
.pl-3
.pr-3
.pb-3
外边距
添加 .m-{size} 控制边距，支持参数 0 ~ 6
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
外单边距
添加 .m{name}-{size} 控制方向外边距，支持边距参数 x、y、t、l、r、b，支持大小参数 0 ~ 6
.mx-3
.my-3
.mt-3
.ml-3
.mr-3
.mb-3
圆角
为容器添加class .radius 或 .round 实现圆角。
默认圆角
.radius
小圆角
.radius-sm
大圆角
.radius-lg
无圆角
.radius-0
大圆角
.round
上边圆角
.radius-top
右边圆角
.radius-right
底部圆角
.radius-bottom
左边圆角
.radius-left
左上 和 右下
.radius-lr
左下 和 右上
.radius-rl
参数
| 参数 | 对应尺寸 | 说明 |
|---|---|---|
| 0 | 0 | 如：m-0 、p-0 |
| 1 | 20rpx * 0.25 | 如：m-1 、p-1 |
| 2 | 20rpx * .5 | 如：m-2 、p-2 |
| 3 | 20rpx | 如：m-3 、p-3 |
| 4 | 20rpx * 1.5 | 如：m-4 、p-4 |
| 5 | 20rpx * 3 | 如：m-5 、p-5 |
| 6 | 20rpx * 5 | 如：m-6 、p-6 |
其它参数
| class | 对应css | 说明 |
|---|---|---|
| .w-100 | width: 100% | - |
| .h-100 | height: 100% | - |
| .none | display: none | !important |
| .inline | display: inline | !important |
| .inline-block | display: inline-block | !important |
| .block | display: block | !important |
| .touch-non | pointer-events: none | 允许点击穿透 |
| .touch-all | pointer-events: all | 只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，参考 |
| .flex | display: flex | !important |
| .inline-flex | display: inline-flex | !important |
| .cf | content: ''; display: table; clear: both; | 会生成 ::after 和 ::before |
| .fl | float: left; | 在左边浮动 |
| .fr | float: right; | 在右边浮动 |