Navbar

层级选项卡 | 多级标签页

提示

Navbar 是为了处理有层级的 tab。若是简单的一级 tab 建议用 Tabs 组件。

Navbar 暂仅支持两层，不支持三层。

基础用法

vue
<template>
  <ap-navbar v-model="nav" :list="list" :trigger="'click'" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const nav = ref(1)
const list = reactive([
  {
    label: 'nav1',
    value: 1,
  },
  {
    label: 'nav2',
    value: 2,
  },
  {
    label: 'nav3',
    value: 3,
    children: [
      {
        label: '二级1',
        value: '3-1',
      },
      {
        label: '二级2',
        value: '3-2',
      },
      {
        label: '二级3',
        value: '3-3',
      },
    ],
  },
])
</script>

下划线样式

通过指定 type 属性为 underline 定义导航的样式有下划线，默认是没有

vue
<template>
  <ap-navbar v-model="nav" :list="list" type="underline" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const nav = ref(1)
const list = reactive([
  {
    label: 'nav1',
    value: 1,
  },
  {
    label: 'nav2',
    value: 2,
  },
  {
    label: 'nav3',
    value: 3,
    children: [
      {
        label: '二级1',
        value: '3-1',
      },
      {
        label: '二级2',
        value: '3-2',
      },
      {
        label: '二级3',
        value: '3-3',
      },
    ],
  },
])
</script>

子级触发方式

通过指定 trigger 属性为 click 指定子级必须点击才生效，默认为 hover

vue
<template>
  <ap-navbar v-model="nav" :list="list" trigger="click" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { NavNode } from 'apathia-ui'

const nav = ref<number>(1)
const list = reactive<Array<NavNode>>([
  {
    label: 'nav1',
    value: 1,
  },
  {
    label: 'nav2',
    value: 2,
  },
  {
    label: 'nav3',
    value: 3,
    children: [
      {
        label: '二级1',
        value: '3-1',
      },
      {
        label: '二级2',
        value: '3-2',
      },
      {
        label: '二级3',
        value: '3-3',
      },
    ],
  },
])
</script>

父级禁用

通过指定 disabled-parent 来设置包含多级选项的父级是否禁用，默认为 true

vue
<template>
  <ap-navbar
    v-model="nav"
    :list="list"
    trigger="click"
    :disabled-parent="false"
  />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { NavNode } from 'apathia-ui'

const nav = ref<number>(1)
const list = reactive<Array<NavNode>>([
  {
    label: 'nav1',
    value: 1,
  },
  {
    label: 'nav2',
    value: 2,
  },
  {
    label: 'nav3',
    value: 3,
    children: [
      {
        label: '二级1',
        value: '3-1',
      },
      {
        label: '二级2',
        value: '3-2',
      },
      {
        label: '二级3',
        value: '3-3',
      },
    ],
  },
])
</script>

Props

prop	说明	类型	默认值
type	样式 default,underline	string	'default'
modelValue	绑定值	string,number	无
list	navbar 的列表{label,value}数组	array	无
trigger	子级 navbar 触发方式	string	'hover'
disabledParent	父组件是否禁止选择	boolean	true

Slots

名称	说明	接收参数
label	自定义展示	nav ({label, value})

Events

change: 改变选择是触发, 参数为 nav ({label, value})

Navbar ​

基础用法 ​

下划线样式 ​

子级触发方式 ​

父级禁用 ​

Props ​

Slots ​

Events ​