Gap

17:06

Description

A spacing placeholder between content blocks. Renders a full-width blank block; height sets its height and margin-top / margin-bottom add outer spacing, while bg-color fills a separator color and defaults to transparent (no background style is written).

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Basic Usage

With no props the gap is 15px tall and transparent, inserted between two content blocks to add spacing.

View source

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

Custom Height (height)

height sets the gap height; a numeric value is treated as px (40px here).

View source

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="40"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

Background Color (bg-color)

When bg-color is not transparent it fills the background; this example uses a red separator (height="20").

View source

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="20" bg-color="#f56c6c"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

Top/Bottom Margin (margin-top / margin-bottom)

On top of height, margin-top / margin-bottom add extra distance from the neighbouring blocks (20px each here).

View source

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="15" margin-top="20" margin-bottom="20"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

Transparent Background (default)

bg-color="transparent" is the default: the component writes no background style and only adds height.

View source

<template>
    <view class="box">
        <text class="box-text">区块一</text>
    </view>
    <ux-gap height="15" bg-color="transparent"></ux-gap>
    <view class="box">
        <text class="box-text">区块二</text>
    </view>
</template>

<style scoped>
.box {
    width: 100%;
    height: 50px;
    background-color: #f2f3f5;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box-text {
    font-size: 14px;
    color: #606266;
}
</style>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
bgColor	Background color	string	'transparent'	-
height	Height	string | number	15	-
marginTop	Distance from the previous component	string | number	0	-
marginBottom	Distance from the next component	string | number	0	-

Events

ux-gap has no events.

Slots

ux-gap has no slots.

Notes

• height / margin-top / margin-bottom are treated as px when a number (or a unitless numeric string) is passed; strings that already carry a unit (e.g. "2em") are used as-is.
• bg-color defaults to transparent, so the component writes no background style and the block is fully transparent, only adding height; pass a concrete color to show a separator.
• The root element is always 100% wide; when height is 0 the block is invisible.
• The component has no events and no slots.