vant/docs/markdown/en-US/nav-bar.md
neverland 03aef579ad
[bugfix] NavBar click event (#354)
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases

* [bugfix] errors during ssr

* [Improvement] SubmitBar add left slot

* [new feature] ImagePreview support manually close

* fix: ImagePreview test case

* [Doc] add switch lang button in mobile

* [bugfix] Popup overlay style update

* [bugfix] NavBar click event
2017-11-27 10:52:26 +08:00

69 lines
1.3 KiB
Markdown

## NavBar
### Install
``` javascript
import { NavBar } from 'vant';
Vue.component(NavBar.name, NavBar);
```
### Usage
#### Basic Usage
```html
<van-nav-bar
title="Title"
leftText="Back"
rightText="Button"
leftArrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
```
```js
export default {
methods: {
onClickLeft() {
Toast('Back');
},
onClickRight() {
Toast('Button');
}
}
}
```
#### Advanced Usage
```html
<van-nav-bar title="Title" leftText="Back" leftArrow>
<van-icon name="search" slot="right" />
</van-nav-bar>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| title | Title | `String` | `''` | - |
| leftText | Left Text | `String` | `''` | - |
| rightText | Right Text | `String` | `''` | - |
| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
| fixed | Whether to fixed top | `Boolean` | `false` | - |
### Slot
| name | Description |
|-----------|-----------|
| title | Custom title |
| left | Custom left side content |
| right | Custom right side content |
### Event
| Event | Description | Attribute |
|-----------|-----------|-----------|
| click-left | Triggered when click left button | - |
| click-right | Triggered when click right button | - |