# WhiteSpace 上下间距

概述

上下间距，布局组件，主要用于设置内容之间上下间距使用。

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiWhiteSpace from "@/components/firstui/fui-white-space/fui-white-space.uvue"
export default {
	components:{
		fuiWhiteSpace
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 size 属性设置间距大小，默认值有small（8rpx）、default（16rpx）、large（24rpx）。

<view class="fui-block"></view>
<fui-white-space size="small"></fui-white-space>
<view class="fui-block"></view>

1
2
3

.fui-block {
	width: 100%;
	height: 80rpx;
	background-color: #fff;
}

1
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

.fui-block {
	width: 100%;
	height: 80rpx;
	background-color: #fff;
}

1
2
3
4
5

插槽名称	说明
default	标签内显示的自定义内容

属性名	类型	说明	默认值	平台差异说明
size	String	默认间距大小，可选值small（8rpx）、default（16rpx）、large（24rpx）	default	-
height	Number	自定义间距大小，单位rpx，设置后则size失效	0	-
background	String	间距背景颜色	transparent	-

事件名	类型	说明	回调参数
@onclick	() => void	点击间距元素时触发	-