低代码高性能原生UI框架Navbar 顶部导航栏
组件类型：UxNavbarComponentPublicInstance
支持左右插槽，更多自定义样式
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Slots
| 名称 | 说明 |
|---|---|
| left | 左侧插槽 |
| title | 标题插槽 |
| right | 右侧插槽 |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | String | - | 标题 |
| alignLeft | Boolean | false | 标题居左 |
| color | string | $ux.Conf.titleColor | 标题颜色 |
| darkColor | String | - | 深色 |
| size | Number | $ux.Conf.fontSize | 字体大小 |
| bold | Boolean | false | 字体加粗 |
| border | Boolean | $ux.Conf.borderColor | 下边框颜色 |
| colors | String[] | - | 背景颜色 多个渐变 |
| fixed | Boolean | false | 固定定位 |
| zIndex | Number | 10000 | 层级z-index |
| goback | Boolean | true | 显示返回按钮 |
| gobackText | 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/tab/navbar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题居左" :bold="true">
<ux-navbar title="首页" :alignLeft="true" :border="false">
<template v-slot:right>
<ux-row :mr="5" justify="right" align="center">
<ux-button theme="text" icon="share"></ux-button>
<ux-button theme="text" icon="setting"></ux-button>
</ux-row>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右侧插槽" :bold="true">
<ux-navbar title="首页">
<template v-slot:right>
<ux-row :mr="5" justify="right" align="center">
<ux-button theme="text" icon="share"></ux-button>
<ux-button theme="text" icon="setting"></ux-button>
</ux-row>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左侧插槽" :bold="true">
<ux-navbar title="首页" :border="true">
<template v-slot:left>
<ux-icon type="angry" :size="16" :ml="15"></ux-icon>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="返回文案" :bold="true">
<ux-navbar title="首页" gobackText="上一页" borderColor="red"></ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="不显示返回按钮" :bold="true">
<ux-navbar title="首页" :goback="false"></ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="背景色" :bold="true">
<ux-row>
<ux-navbar title="首页" color="white" :colors="['yellow', 'green']" :border="false"></ux-navbar>
</ux-row>
</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/tab/navbar.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-card direction="column" icon="arrowright" title="标题居左" :bold="true">
<ux-navbar title="首页" :alignLeft="true" :border="false">
<template v-slot:right>
<ux-row :mr="5" justify="right" align="center">
<ux-button theme="text" icon="share"></ux-button>
<ux-button theme="text" icon="setting"></ux-button>
</ux-row>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="右侧插槽" :bold="true">
<ux-navbar title="首页">
<template v-slot:right>
<ux-row :mr="5" justify="right" align="center">
<ux-button theme="text" icon="share"></ux-button>
<ux-button theme="text" icon="setting"></ux-button>
</ux-row>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="左侧插槽" :bold="true">
<ux-navbar title="首页" :border="true">
<template v-slot:left>
<ux-icon type="angry" :size="16" :ml="15"></ux-icon>
</template>
</ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="返回文案" :bold="true">
<ux-navbar title="首页" gobackText="上一页" borderColor="red"></ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="不显示返回按钮" :bold="true">
<ux-navbar title="首页" :goback="false"></ux-navbar>
</ux-card>
<ux-card direction="column" icon="arrowright" title="背景色" :bold="true">
<ux-row>
<ux-navbar title="首页" color="white" :colors="['yellow', 'green']" :border="false"></ux-navbar>
</ux-row>
</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>