DashboardNavbarToggle - Nuxt UI Pro

用法

该组件在 #toggle 的 DashboardNavbar 组件的插槽中内部使用。它仅在移动设备上可见，并将打开父级 DashboardPanel 作为 Slideover。

你可以传递任何 Button 组件的 prop 来覆盖样式或大小，它们将被转发。

pages/inbox.vue

<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar title="Inbox" />
    </UDashboardPanel>

    <UDashboardPanel>
      <UDashboardNavbar>
        <template #toggle>
          <UDashboardNavbarToggle icon="i-heroicons-x-mark" />
        </template>
      </UDashboardNavbar>
    </UDashboardPanel>
  </UDashboardPage>
</template>

它的图标默认为 i-heroicons-bars-3-20-solid 来自 appConfig.ui.icons.menu。你可以通过 icon prop 或在你的 app.config.ts 中全局覆盖它。

了解有关通过 Nuxt App Config 进行全局图标配置的更多信息。

DashboardNavbar

在DashboardPanel中显示的导航栏。

DashboardPage

仪表盘页面的包装器。

仪表盘导航栏切换

用法