SafeBottom — Bottom Safe Area

17:06

Description

A bottom safe-area placeholder. Uses the device's bottom safe-area inset (safeAreaInsets.bottom) to render a placeholder of equal height (in px), keeping content clear of the home indicator; on devices without a safe area the height is 0. uni-app x UCSS has no env(), so the height is computed in JS.

Compatibility

Platform	Support
App	✅ Supported (fills the safe-area height on devices with a home indicator)
H5	✅ Supported (browsers have no system safe area, so the height is 0)
WeChat Mini Program	✅ Supported

Examples

Basic Usage

A placeholder component for the bottom safe area that automatically adapts to the safe-area height.

View source

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <!-- 自动适配底部安全区，非全面屏机型高度为 0 -->
    <ux-safe-bottom />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
</style>

Custom Style (custom-style)

Use custom-style to set custom styles such as the background color.

View source

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <ux-safe-bottom :custom-style="{ backgroundColor: '#f56c6c' }" />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
</style>

Custom Class (custom-class)

Use custom-class to add a custom style class.

View source

<template>
    <view class="content">
        <text>内容区域</text>
    </view>
    <ux-safe-bottom custom-class="custom-safe-bottom" />
</template>

<style scoped>
.content {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
    border-radius: 8px;
}
.custom-safe-bottom {
    background-color: #2979ff;
}
</style>

API

Props

Property	Description	Type	Default	Version
customStyle	Custom root element style	string | UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-

Events

ux-safe-bottom has no events.

Slots

ux-safe-bottom has no slots.

Notes

• The height comes from safeAreaInsets.bottom (in px); on devices without a bottom safe area (non-full-screen phones, H5 browsers) it is 0 and the component is invisible — this is expected.
• The height is computed in JS (uni-app x UCSS has no env()); useWindowInfo refreshes once after onMounted, so the App side may see one height update after the first layout.
• The component is always 100% wide and transparent by default; commonly paired with custom-style to set a background color and custom-class to add a style class.
• The component has no events and no slots.