Nuxt UI v3-alpha 已发布!

试试看

仪表盘工具栏

一个子导航栏,用于在您的仪表盘面板中添加操作。

用法

DashboardToolbar 组件充当一个子导航栏,具有预定义的高度,与 DashboardSidebar 甚至 Table 行的 #header 槽位完全匹配。

您可以使用 #default 或者 #left#right 槽位在工具栏中添加操作。

在里面放任何您想要的东西,例如 HorizontalNavigation 组件。

<script setup lang="ts">
const links = [[{
  label: 'General',
  icon: 'i-heroicons-user-circle'
}, {
  label: 'Members',
  icon: 'i-heroicons-user-group'
}, {
  label: 'Notifications',
  icon: 'i-heroicons-bell'
}], [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: 'https://ui.nuxtjs.org.cn/pro',
  target: '_blank'
}, {
  label: 'Buy now',
  icon: 'i-heroicons-ticket',
  to: 'https://ui.nuxtjs.org.cn/pro/pricing',
  target: '_blank'
}]]
</script>

<template>
  <UDashboardToolbar class="py-0 px-1.5 overflow-x-auto">
    <UHorizontalNavigation :links="links" />
  </UDashboardToolbar>
</template>

DashboardToolbar 通常放置在 DashboardPanelDashboardNavbar 下面。

pages/users.vue
<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Users" />

      <UDashboardToolbar>
        <template #left>
          <USelectMenu icon="i-heroicons-check" placeholder="Status" multiple />
          <USelectMenu icon="i-heroicons-map-pin" placeholder="Location" multiple />
        </template>

        <template #right>
          <USelectMenu label="Display" icon="i-heroicons-computer-desktop" multiple />
        </template>
      </UDashboardToolbar>
    </UDashboardPanel>
  </UDashboardPage>
</template>

槽位

默认
{}
{}
{}

属性

ui
DeepPartial<{ wrapper: string; container: string; left: string; right: string; }>
{}

配置

{
  wrapper: 'min-h-[49px] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 py-2 gap-x-4',
  container: 'flex items-center justify-between flex-1 gap-x-1.5',
  left: 'flex items-stretch gap-1.5',
  right: 'flex items-stretch gap-1.5'
}