NavBar 导航栏

APP导航栏

df739d968e8894bb03403a5fefa1803fc7ae70a0/examples/views/docs/component/nav-bar.md#">基础用法

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

<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>

:::

df739d968e8894bb03403a5fefa1803fc7ae70a0/examples/views/docs/component/nav-bar.md#">左右按钮

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

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

<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>

:::

df739d968e8894bb03403a5fefa1803fc7ae70a0/examples/views/docs/component/nav-bar.md#">自定义按钮

支持插槽

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

<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 | 右侧按钮点击事件 | -