Navbar 头部导航

介绍

提供导航功能。

安装

import { createApp } from 'vue';
import { Navbar } from '@nutui/nutui';
const app = createApp();
app.use(Navbar);

代码示例

基本用法

  <nut-navbar  @on-click-back="back" @on-click-title="title" @on-click-send="send" title="订单详情" icon="share"></nut-navbar>
  <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="clear"  title="浏览记录" desc="清空"></nut-navbar>
  <nut-navbar :left-show="false" @on-click-title="title" @on-click-icon="icon" @on-click-clear="edit"  @on-click-send="more" title="购物车" titIcon="locationg3" desc="编辑" icon="more"></nut-navbar>

设置slot:tabs可以增加tab

    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-clear="edit" @on-click-send="list" desc="编辑" icon="horizontal">
      <template v-slot:tabs>
        <nut-tab>
          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
          <nut-tab-panel tab-title="店铺"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
        </nut-tab>
      </template>
    </nut-navbar>

多tab切换导航及增加右侧按钮

    <nut-navbar @on-click-back="back" icon="share" @on-click-send="send">
      <template v-slot:tabs>
        <nut-tab>
          <nut-tab-panel tab-title="商品"><p class="content">这里是页签全部内容</p></nut-tab-panel>
          <nut-tab-panel tab-title="评价"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
          <nut-tab-panel tab-title="详情"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
          <nut-tab-panel tab-title="推荐"><p class="content">这里是页签待付款内容</p></nut-tab-panel>
        </nut-tab>
      </template>
      <template #icons >
        <nut-icon class="icon" name="more" @on-click-slot-send="morelist"></nut-icon>
      </template>
    </nut-navbar>

Prop

Event