# WingBlank 左右间距

概述

左右间距，布局组件，主要用于设置元素内容两侧空白间距。

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

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

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

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

import fuiWingBlank from "@/components/firstui/fui-wing-blank/fui-wing-blank.uvue"
export default {
	components:{
		fuiWingBlank
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

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

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

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

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

基础使用

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

<fui-wing-blank size="small">
	<view class="fui-block"></view>
</fui-wing-blank>

1
2
3

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

1
2
3
4
5

设置自定义间距

通过 gap 属性设置自定间距，设置自定义间距后 size 属性失效。

<fui-wing-blank :gap="64">
	<view class="fui-block"></view>
</fui-wing-blank>

1
2
3

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

1
2
3
4
5

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

属性名	类型	说明	默认值	平台差异说明
size	String	默认间距大小，可选值small（16rpx）、default（24rpx）、large（32rpx）	default	-
gap	Number	自定义间距大小，单位rpx，设置后则size失效	0	-
background	String	背景颜色	-	-
radius	Number	圆角大小，单位rpx	0	-
marginTop	Number	margin-top值，单位rpx	0	-
marginBottom	Number	margin-bottom值，单位rpx	0	-

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