mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-09-02 06:09:45 +08:00
f36961fe29
* 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
80 lines
1.4 KiB
Markdown
80 lines
1.4 KiB
Markdown
# NavBar
|
|
|
|
### Install
|
|
|
|
```js
|
|
import Vue from 'vue';
|
|
import { NavBar } from 'vant';
|
|
|
|
Vue.use(NavBar);
|
|
```
|
|
|
|
## Usage
|
|
|
|
### Basic Usage
|
|
|
|
```html
|
|
<van-nav-bar
|
|
title="Title"
|
|
left-text="Back"
|
|
right-text="Button"
|
|
left-arrow
|
|
@click-left="onClickLeft"
|
|
@click-right="onClickRight"
|
|
/>
|
|
```
|
|
|
|
```js
|
|
import { Toast } from 'vant';
|
|
|
|
export default {
|
|
methods: {
|
|
onClickLeft() {
|
|
Toast('Back');
|
|
},
|
|
onClickRight() {
|
|
Toast('Button');
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Advanced Usage
|
|
|
|
```html
|
|
<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 | - |
|