# WhiteSpace 上下间距 V2.1.0+
概述
上下间距，布局组件，主要用于设置内容之间上下间距使用。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "上下间距",
"usingComponents": {
"fui-white-space":"/components/firstui/fui-white-space/fui-white-space"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-white-space": "components/firstui/fui-white-space/fui-white-space"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 size 属性设置间距大小，默认值有small（16rpx）、default（24rpx）、large（32rpx）。
<view class="fui-block"></view>
<fui-white-space size="small"></fui-white-space>
<view class="fui-block"></view>
1
2
3
2
3
.fui-block {
width: 100%;
height: 80rpx;
background-color: #fff;
}
1
2
3
4
5
2
3
4
5
设置自定义间距
通过 height 属性设置自定间距，设置自定义间距后 size 属性失效。
<view class="fui-block"></view>
<fui-white-space height="10"></fui-white-space>
<view class="fui-block"></view>
1
2
3
2
3
.fui-block {
width: 100%;
height: 80rpx;
background-color: #fff;
}
1
2
3
4
5
2
3
4
5
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示的自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| size | String | 默认间距大小，可选值small（16rpx）、default（24rpx）、large（32rpx） 默认优先使用全局配置 | default | - |
| height | Number, String | 自定义间距大小，单位rpx，设置后则size失效 | 0 | - |
| background | String | 间距背景颜色 | transparent | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| bind:click | 点击间距元素时触发 | - |