NavBar navigation bar

introduce

Provide navigation function for the page, often used at the top of the page.

Code Demo

Basic usage

Set the navigation bar title through the title attribute.

<z-nav-bar title="title" />

Return to previous page

Implement the return to previous function in the navigation bar.

<z-nav-bar title="Title" left-text="Return" left-arrow />

Right button

Add a clickable button to the right of the navigation bar.

<z-nav-bar
   title="title"
   left-text="Return"
   right-text="Button"
   left-arrow
   @click-right="toast.showToast('button')"
/>

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()

Using slots

The content on either side of the navigation bar can be customized via slots.

<z-nav-bar title="Title" left-text="Return" left-arrow>
   <template #right>
     <z-icon name="search" size="18" />
   </template>
</z-nav-bar>

Disable button

Disable buttons on both sides via the left-disabled or right-disabled properties. When a button is disabled, its transparency is reduced and it cannot be clicked.

<z-nav-bar
   title="title"
   left-text="Return"
   right-text="Button"
   left-arrow
   left-disabled
   right-disabled
/>

API

Props

Parameters	Description	Type	Default value
title	title	string	`''`
left-text	left copy	string	`''`
right-text	right side copy	string	`''`
left-disabled	Whether to disable the left button. When disabled, the transparency is reduced and cannot be clicked	boolean	`false`
right-disabled	Whether to disable the right button. When disabled, the transparency is reduced and cannot be clicked	boolean	`false`
left-arrow	Whether to display the left arrow	boolean	`false`
border	Whether to display the bottom border	boolean	`true`
fixed	Whether to be fixed at the top	boolean	`false`
placeholder	Whether to generate a placeholder element of equal height at the label position when fixed at the top	boolean	`false`
z-index	Navigation bar z-index	number \| string	`1`
safe-area-inset-top	Whether to enable top safe area adaptation	boolean	`false`
clickable	Whether to enable click feedback for buttons on both sides	boolean	`true`
autoBack	Whether to automatically return to the previous page after clicking	boolean	`true`

Slots

Name	Description
title	custom title
left	Customize left area content
right	Customize the content of the right area

Events

Event name	Description	Callback parameters
click-left	Triggered when the left button is clicked	event: MouseEvent
click-right	Triggered when the right button is clicked	event: MouseEvent

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-nav-bar-height	92rpx	-
--z-nav-bar-background	var(--z-background-2)	-
--z-nav-bar-arrow-size	32rpx	-
--z-nav-bar-icon-color	var(--z-primary-color)	-
--z-nav-bar-text-color	var(--z-primary-color)	-
--z-nav-bar-title-font-size	var(--z-font-size-lg)	-
--z-nav-bar-title-text-color	var(--z-text-color)	-
--z-nav-bar-z-index	1	-