低代码高性能原生UI框架Placeholder 高度占位
组件类型：UxPlaceholderComponentPublicInstance
支持状态栏、标题栏、底部导航栏、底部安全区域、任意高度
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| height | Number | - | 占位高度 优先级更高 |
| statusbar | Boolean | false | 状态栏高度占位 |
| navbar | Boolean | false | 标题栏高度占位 |
| tabbar | Boolean | false | 底部导航栏高度占位 |
| safearea | Boolean | false | 底部安全区高度占位 |
| background | String | 'transparent' | 背景色 |
| backgroundDark | String | - | 深色 |
darkColor
| 值 | 说明 |
|---|---|
| none | 不显示 |
| auto | 自动适配深色模式 |
| color | 其他颜色 |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="高度占位" :bold="true">
<ux-text text="支持状态栏、标题栏、底部导航栏、底部安全区域、任意高度"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="高度占位" text="https://www.uxframe.cn/component/layout/placeholder.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="状态栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :statusbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :navbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="底部导航栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :tabbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="底部安全区高度" :bold="true">
<ux-placeholder background="#eaeaea" :safearea="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义高度" :bold="true">
<ux-placeholder background="#eaeaea" :height="200"></ux-placeholder>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll>
<ux-card direction="column" icon="flag" title="高度占位" :bold="true">
<ux-text text="支持状态栏、标题栏、底部导航栏、底部安全区域、任意高度"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="高度占位" text="https://www.uxframe.cn/component/layout/placeholder.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="状态栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :statusbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :navbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="底部导航栏高度" :bold="true">
<ux-placeholder background="#eaeaea" :tabbar="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="底部安全区高度" :bold="true">
<ux-placeholder background="#eaeaea" :safearea="true"></ux-placeholder>
</ux-card>
<ux-card direction="column" icon="arrowright" title="自定义高度" :bold="true">
<ux-placeholder background="#eaeaea" :height="200"></ux-placeholder>
</ux-card>
<ux-placeholder :height="200">
<ux-row justify="center" align="center" style="height: 100%;">
<ux-text prefix-icon="wink" text="真的没有了~"></ux-text>
</ux-row>
</ux-placeholder>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script><script setup>
let title = ''
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
</script>css
<style lang="scss">
</style><style lang="scss">
</style>