Tantalum UI

Appearance

Return to top
On this page

NavBar 导航栏

vue
<template>
  <ta-group title="基础用法">
    <ta-nav-bar title="标题" />
  </ta-group>
  <ta-group title="显示返回按钮">
    <ta-nav-bar title="标题" showBack />
  </ta-group>
  <ta-group title="展示首页按钮">
    <ta-nav-bar title="标题" showBack showHome />
  </ta-group>
  <ta-group title="展示右侧按钮">
    <ta-nav-bar
      title="标题"
      showBack
      showHome
      :rightButtons="[{ icon: 'MenuOutlined', text: '菜单' }]"
    />
  </ta-group>
  <ta-group title="按钮带文本">
    <ta-nav-bar
      title="标题"
      showBack
      showHome
      :rightButtons="[{ icon: 'MenuOutlined', text: '菜单' }]"
    />
    <ta-nav-bar
      title="标题"
      showBack
      :iconOnly="false"
      :rightButtons="[{ icon: 'MenuOutlined', text: '菜单' }]"
    />
  </ta-group>
  <ta-group title="固定顶部(配合 fixed 组件)">
    <div class="exp-navBar-fixed">上下滑动观察最顶部的导航</div>
  </ta-group>
  <ta-group title="事件监听">
    <ta-nav-bar
      title="标题双击"
      showBack
      showHome
      :rightButtons="[{ icon: 'MenuOutlined', text: '菜单' }]"
      @backClick="showToast('返回按钮点击')"
      @homeClick="showToast('首页按钮点击')"
      @titleDbclick="showToast('标题双击')"
      @rightButtonClick="onRightButtonClick"
    >
    </ta-nav-bar>
  </ta-group>
  <ta-group title="Slot left / right">
    <ta-nav-bar title="标题" :rightButtons="[{ icon: 'MenuOutlined', text: '菜单' }]">
      <template #left>
        <div class="exp-navBar-left">Left Slot</div>
      </template>
    </ta-nav-bar>
    <ta-nav-bar title="标题" showBack showHome>
      <template #right>
        <div class="exp-navBar-right">Right Slot</div>
      </template>
    </ta-nav-bar>
    <ta-nav-bar title="标题" showBack showHome>
      <template #left>
        <div class="exp-navBar-left">
          <ta-button type="primary" icon="LeftOutlined" size="small"> 返回 </ta-button>
        </div>
      </template>
      <template #right>
        <div class="exp-navBar-right">
          <ta-button type="primary" icon="MenuOutlined" size="small"> 菜单 </ta-button>
        </div>
      </template>
    </ta-nav-bar>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { showToast, showDialog, type NavBarOnButtonClick } from '@/index'

export default defineComponent({
  name: 'ExpNavBar',
  setup() {
    const onRightButtonClick: NavBarOnButtonClick = res => {
      console.log(res)

      showDialog({
        title: '右侧按钮点击',
        showCancel: false,
        content: `text: '${res.item.text}'\nindex: ${res.index}`
      })
    }

    return { showToast, onRightButtonClick }
  }
})
</script>

Import

js
import { TaNavBar } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type {
  NavBarButtonOption,
  NavBarOnButtonClick,
  NavBarOnTitleDbClick
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
titlestring''否标题
show-backbooleanfalse否是否展示返回按钮
show-homebooleanfalse否是否展示首页按钮
left-buttonsNavBarButtonOption[][]左侧按钮列表，优先级高于首页和返回按钮
right-buttonsNavBarButtonOption[][]右侧按钮列表
icon-onlybooleantrue否是否展示纯图标按钮
ts
type NavBarButtonOption = {
  text: string
  icon?: IconData
  type?: StateType
}

const options: NavBarButtonOption[] = [{ icon: 'MenuOutlined', text: '菜单' }]

其中图标，使用 Icon 组件。

Events

事件描述回调函数参数TypeScript 函数
back-click返回按钮点击时出发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
home-click到首页按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
title-dbclick标题双击时触发，可配合做双击返回顶部titleEl: HTMLElementNavBarOnTitleDbClick
left-button-click左侧按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick
right-button-click右侧按钮点击时触发payload: Payload, buttonEl: HTMLElementNavBarOnButtonClick

Payload

ts
type Payload = {
  item: {
    text: string
  }
  index: number
}
参数类型描述
item.textstring点击按钮的文本
indexnumber点击按钮的索引值

Slots

左侧区域自定义（#left）

vue
<ta-nav-bar title="标题" :right-buttons="[{ icon: 'MenuOutlined', text: '菜单' }]">
  <template #left>Left Slot</template>
</ta-nav-bar>

右侧区域自定义（#right）

vue
<ta-nav-bar title="标题" :show-back="true" :show-home="true">
  <template #right>Right Slot</template>
</ta-nav-bar>