# NavBar 导航栏

APP导航栏

## 基础用法

::: snippet 设置`title`改变标题，设置`primary`改变为主色模式，设置`border`显示下边框

```html
<template>
  <div>
    <zui-nav-bar title="显示边框" border></zui-nav-bar>
    <zui-nav-bar title="默认"></zui-nav-bar>
    <zui-nav-bar title="主色" primary></zui-nav-bar>
  </div>
</template>
```

:::

## 左右按钮

支持自定义左侧和右侧的按钮文字，且支持显示左侧返回按钮

::: snippet 设置`leftText`改变左侧按钮文案，设置`rightText`改变右侧按钮文案

```html
<template>
  <div>
    <zui-nav-bar title="返回按钮" leftArrow></zui-nav-bar>
    <zui-nav-bar title="左侧文字" leftText="返回" primary></zui-nav-bar>
    <zui-nav-bar title="右侧文字" rightText="设置"></zui-nav-bar>
  </div>
</template>
```

:::

## 自定义按钮

支持插槽

::: snippet 可以设置`left`、`title`、`right`插槽自定义按钮和标题内容

```html
<template>
  <div>
    <zui-nav-bar title="则一速达">
      <div slot="left"><zui-icon name="search"></zui-icon>搜索</div>
      <div slot="title"><zui-icon name="dns"></zui-icon>标题</div>
      <div slot="right"><zui-icon name="settings"></zui-icon>设置</div>
    </zui-nav-bar>
  </div>
</template>
```

:::

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
title | 标题 | String | - | -
leftIcon | 左侧图标 | String | - | return
leftText | 左侧文案 | String | - | -
rightText | 右侧文案 | String | - | -
leftArrow | 是否显示左侧箭头 | Boolean | - | false
fixed | 是否固定在顶部 | Boolean | - | false
border | 是否显示下边框 | Boolean | - | false
zIndex | z-index | Number,String | - | 1
primary | 是否为品牌色主题 | Boolean | - | false

## Events 事件

事件名称|说明|回调参数
-|-|-
click-left | 左侧按钮点击事件 | -
click-right | 右侧按钮点击事件 | -