# WingBlank 左右间距 V2.1.0+
概述
左右间距，布局组件，主要用于设置元素内容两侧空白间距。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "左右间距",
"usingComponents": {
"fui-wing-blank":"/components/firstui/fui-wing-blank/fui-wing-blank"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-wing-blank": "components/firstui/fui-wing-blank/fui-wing-blank"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 size 属性设置间距大小，默认值有small（16rpx）、default（24rpx）、large（32rpx）。
<fui-wing-blank size="small">
<view class="fui-block"></view>
</fui-wing-blank>
1
2
3
2
3
.fui-block {
width: 100%;
height: 80rpx;
background-color: #fff;
}
1
2
3
4
5
2
3
4
5
设置自定义间距
通过 gap 属性设置自定间距，设置自定义间距后 size 属性失效。
<fui-wing-blank gap="64">
<view class="fui-block"></view>
</fui-wing-blank>
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 | - |
| gap | Number, String | 自定义间距大小，单位rpx，设置后则size失效 | 0 | - |
| background | String | 背景颜色 | - | - |
| radius | Number, String | 圆角大小，单位rpx | 0 | - |
| marginTop | Number, String | margin-top值，单位rpx | 0 | - |
| marginBottom | Number, String | margin-bottom值，单位rpx | 0 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| bind:click | 点击时触发 | - |