控制面板工具栏PRO

GitHub
用于在控制面板的导航栏下方显示的工具栏。

用法

DashboardToolbar 组件用于在 DashboardNavbar 组件下方显示工具栏。

将其用于 DashboardPanel 组件的 header 插槽中

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

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

      <UDashboardToolbar />
    </template>
  </UDashboardPanel>
</template>

使用 left, default 和 right 插槽来自定义工具栏。

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

const items: NavigationMenuItem[][] = [
  [
    {
      label: 'General',
      icon: 'i-lucide-user',
      active: true
    },
    {
      label: 'Members',
      icon: 'i-lucide-users'
    },
    {
      label: 'Notifications',
      icon: 'i-lucide-bell'
    }
  ],
  [
    {
      label: 'Documentation',
      icon: 'i-lucide-book-open',
      to: 'https://ui.nuxtjs.org.cn/getting-started/installation/pro/nuxt',
      target: '_blank'
    },
    {
      label: 'Buy now',
      icon: 'i-lucide-shopping-cart',
      to: 'https://ui.nuxtjs.org.cn/pro/purchase',
      target: '_blank'
    }
  ]
]
</script>

<template>
  <UDashboardToolbar>
    <UNavigationMenu :items="items" highlight class="flex-1" />
  </UDashboardToolbar>
</template>
在此示例中，我们使用 NavigationMenu 组件来渲染一些链接。

API

属性

属性默认值类型
as

'div'

any

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

ui

{ root?: ClassNameValue; left?: ClassNameValue; right?: ClassNameValue; }

插槽

插槽类型
default

{}

left

{}

right

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardToolbar: {
      slots: {
        root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
        left: 'flex items-center gap-1.5',
        right: 'flex items-center gap-1.5'
      }
    }
  }
})
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: {
        dashboardToolbar: {
          slots: {
            root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
            left: 'flex items-center gap-1.5',
            right: 'flex items-center gap-1.5'
          }
        }
      }
    })
  ]
})
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: {
        dashboardToolbar: {
          slots: {
            root: 'shrink-0 flex items-center justify-between border-b border-default px-4 sm:px-6 gap-1.5 overflow-x-auto min-h-[49px]',
            left: 'flex items-center gap-1.5',
            right: 'flex items-center gap-1.5'
          }
        }
      }
    })
  ]
})

控制面板侧边栏切换

用于在移动设备上切换侧边栏的按钮。

抽屉

一个可以平滑地滑入和滑出屏幕的抽屉。