DashboardNavbarPRO

GitHub
一个用于在仪表盘中显示的响应式导航栏。

用法

DashboardNavbar 组件是一个响应式导航栏，与 DashboardSidebar 组件集成。它包含一个移动切换按钮，可在仪表盘布局中启用响应式导航。

在 DashboardPanel 组件的 header 插槽中使用它。

pages/index.vue
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar />
    </template>
  </UDashboardPanel>
</template>

使用 left、default 和 right 插槽来自定义导航栏。

<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items: TabsItem[] = [
  {
    label: 'All',
    value: 'all'
  },
  {
    label: 'Unread',
    value: 'unread'
  }
]
</script>

<template>
  <UDashboardNavbar title="Inbox">
    <template #leading>
      <UDashboardSidebarCollapse />
    </template>

    <template #trailing>
      <UBadge label="4" variant="subtle" />
    </template>

    <template #right>
      <UTabs :items="items" default-value="all" size="sm" class="w-40" :content="false" />
    </template>
  </UDashboardNavbar>
</template>
在此示例中，我们在右侧插槽中使用 Tabs 组件来显示一些选项卡。

标题

使用 title 属性设置导航栏的标题。

仪表盘

<template>
  <UDashboardNavbar title="Dashboard" />
</template>

Icon

使用 icon 属性设置导航栏的图标。

仪表盘

<template>
  <UDashboardNavbar title="Dashboard" icon="i-lucide-house" />
</template>

切换

使用 toggle 属性自定义在移动设备上显示的切换按钮，该按钮用于打开 DashboardSidebar 组件。

您可以传入 Button 组件的任何属性来自定义它。

<template>
  <UDashboardNavbar
    title="Dashboard"
    :toggle="{
      color: 'primary',
      variant: 'subtle',
      class: 'rounded-full'
    }"
  />
</template>

切换侧边

使用 toggle-side 属性更改切换按钮的侧边位置。默认为 right。

<template>
  <UDashboardNavbar
    title="Dashboard"
    toggle-side="right"
  />
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

图标

string

标题旁边显示的图标。

标题

string

toggle

true

boolean | Partial<ButtonProps>

自定义用于打开侧边栏的切换按钮。 { color: 'neutral', variant: 'ghost' }

toggleSide

'left'

"right" | "left"

渲染切换按钮的侧边位置。

ui

{ root?: ClassNameValue; left?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; toggle?: ClassNameValue; }

插槽

插槽类型
标题

{}

前置

DashboardNavbarSlotsProps

尾部

DashboardNavbarSlotsProps

left

DashboardNavbarSlotsProps

default

DashboardNavbarSlotsProps

right

DashboardNavbarSlotsProps

toggle

DashboardNavbarSlotsProps

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardNavbar: {
      slots: {
        root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5',
        left: 'flex items-center gap-1.5 min-w-0',
        icon: 'shrink-0 size-5 self-center me-1.5',
        title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
        center: 'hidden lg:flex',
        right: 'flex items-center shrink-0 gap-1.5',
        toggle: ''
      },
      variants: {
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: ''
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        dashboardNavbar: {
          slots: {
            root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5',
            left: 'flex items-center gap-1.5 min-w-0',
            icon: 'shrink-0 size-5 self-center me-1.5',
            title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
            center: 'hidden lg:flex',
            right: 'flex items-center shrink-0 gap-1.5',
            toggle: ''
          },
          variants: {
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: ''
              }
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardNavbar: {
          slots: {
            root: 'h-(--ui-header-height) shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5',
            left: 'flex items-center gap-1.5 min-w-0',
            icon: 'shrink-0 size-5 self-center me-1.5',
            title: 'flex items-center gap-1.5 font-semibold text-highlighted truncate',
            center: 'hidden lg:flex',
            right: 'flex items-center shrink-0 gap-1.5',
            toggle: ''
          },
          variants: {
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: ''
              }
            }
          }
        }
      }
    })
  ]
})

DashboardGroup

一个固定布局组件，为具有侧边栏状态管理和持久性的仪表盘组件提供上下文。

DashboardPanel

一个可在仪表盘中显示的，可调整大小的面板。