vant/src/nav-bar

NavBar

Install

import { createApp } from 'vue';
import { NavBar } from 'vant';

const app = createApp();
app.use(NavBar);

Usage

Basic Usage

<van-nav-bar
  title="Title"
  left-text="Back"
  right-text="Button"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>

import { Toast } from 'vant';

export default {
  methods: {
    onClickLeft() {
      Toast('Back');
    },
    onClickRight() {
      Toast('Button');
    },
  },
};

Use Slot

<van-nav-bar title="Title" left-text="Back" left-arrow>
  <template #right>
    <van-icon name="search" />
  </template>
</van-nav-bar>

API

Props

Attribute	Description	Type	Default
title	Title	string	''
left-text	Left Text	string	''
right-text	Right Text	string	''
left-arrow	Whether to show left arrow	boolean	false
border	Whether to show bottom border	boolean	true
fixed	Whether to fixed top	boolean	false
placeholder v2.5.9	Whether to generage a placeholder element when fixed	boolean	false
z-index	Z-index	number | string	1
safe-area-inset-top v2.10.13	Whether to enable top safe area adaptation	boolean	false

Slots

Name	Description
title	Custom title
left	Custom left side content
right	Custom right side content

Events

Event	Description	Arguments
click-left	Emitted when the left button is clicked	-
click-right	Emitted when the right button is clicked	-

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@nav-bar-height	46px	-
@nav-bar-background-color	@white	-
@nav-bar-arrow-size	16px	-
@nav-bar-icon-color	@blue	-
@nav-bar-text-color	@blue	-
@nav-bar-title-font-size	@font-size-lg	-
@nav-bar-title-text-color	@text-color	-
@nav-bar-z-index	1	-