mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-08-31 13:19:45 +08:00
* docs(SwipeCell): change "slot" to "v-slot" * docs(SwipeCell): change `v-slot` to`#` * docs(cell): change `slot` to `#` * docs(checkbox): change `slot` to `v-slot` * docs(field): change `slot` to `v-slot` * docs(checkbox): remove wrong comment * docs(radio): change `slot` to `#` * docs(search): change `slot` to `#` * docs(slider): change `slot` to `#` * docs(switch): change `slot` to `#` * docs(PullRefresh): change `slot` to `#` * docs(collapse): change `slot` to `#` * docs(panel): change `slot` to `#` * docs(swipe): change `slot` to `#` * docs(navbar): change `slot` to `#` * docs(tab): change `slot` to `#` * docs(tabber): change `slot` to `#` * docs(TreeSelect): change `slot` to `#` * docs(card): change `slot` to `#` * docs(submitBar): change `slot` to `#` * docs(sku): change `slot` to `#` unsure * docs(cell): delete waste blank line * docs(panel): fix indentation * docs(PullRefresh): change "count" to "Refresh Count" * docs(radio): delete waste blank line * docs(search): move props above the event * docs(submitBar): delete waste `<span>` * docs(swipCell): delete waste blank line * docs(tabbar): merge `<img>` into one line
1.4 KiB
1.4 KiB
NavBar
Install
import Vue from 'vue';
import { NavBar } from 'vant';
Vue.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');
}
}
}
Advanced Usage
<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 |
fixed | Whether to fixed top | boolean | false |
border | Whether to show bottom border | boolean | true |
z-index | Z-index | number | string | 1 |
Slots
Name | Description |
---|---|
title | Custom title |
left | Custom left side content |
right | Custom right side content |
Events
Event | Description | Arguments |
---|---|---|
click-left | Triggered when click left button | - |
click-right | Triggered when click right button | - |