Navbar 导航栏

预览

01:38



---

组件名：rice-navbar

自定义导航栏

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

<rice-navbar title="Navbar 导航栏" border></rice-navbar>

左侧文字

<rice-navbar title="左侧带文字" :fixed="false" :safe-area-inset-top="false" left-text="返回" :auto-back="false"
left-text-color="#1989fa" left-icon-color='#1989fa' @clickLeft="onLeftClick" @clickRight="onRightClick" />

自定义插槽

<rice-navbar :fixed="false"  :safe-area-inset-top="false">
  <template #left>
    <rice-icon name="home" size="22px" color="#1989fa" />
  </template>
  <template #title>
    <text class="title-text">自定义插槽</text>
  </template>
  <template #right>
    <rice-icon name="star" size="22px" color="#1989fa" />
  </template>
</rice-navbar>

API

Props

属性名	类型	说明	默认值
title	String	导航栏标题	-
title-size	String|Number	标题文字的大小,默认16px	-
title-color	String|Number	标题文字的颜色	-
title-width	String|Number	标题栏最大宽度，超出会显示省略号,默认70%	-
fixed	Boolean	是否固定在顶部，默认true	-
placeholder	Boolean	固定在顶部时，是否生成一个等高的元素防止塌陷，默认true	-
border	Boolean	导航栏底部是否显示下边框，默认true	-
left-arrow	Boolean	是否显示返回箭头，默认true	-
left-icon	String	左侧返回图标的名称，默认 arrow-left	-
left-icon-size	String	左侧返回图标的大小	-
left-icon-color	String	左侧返回图标的颜色	-
left-text	String	左侧文案	-
left-text-color	String	左侧文案颜色	-
right-text	String	右侧文案	-
right-text-color	String	右侧文案颜色	-
z-index	Number	层级，默认999	-
bg-color	String	背景色，支持渐变色	-
safe-area-inset-top	Boolean	是否开启顶部安全区适配,默认true	-
height	String|Number	导航栏高度，不包含状态栏，safeAreaInsetTop为true时内部会自动加上状态栏的高度，默认44px	-
auto-back	Boolean	点击左侧箭头区域，是否自动返回上一页，默认true	-
custom-style	Object	自定义样式	-

Events

事件名	说明	回调参数
clickLeft	点击左侧图标时触发	-
clickRight	点击右侧图标时触发	-

名称	说明
left	左侧区域
title	标题
right	右侧区域

类型定义

组件导出如下类型

// 组件类型
const navbarRef = ref<RiceNavbarComponentPublicInstance | null>(null)