Nuxt UI v3-alpha 已发布!

立即体验

仪表盘侧边栏

一个可滚动容器,用于在仪表盘面板内显示链接。

用法

DashboardSidebar 组件是一个可滚动的容器,包含一些内边距,用于显示一些 DashboardSidebarLinks,并包含一个固定 #header#footer

它通常放置在 DashboardPanel 内,位于 DashboardNavbar 组件下方。

layouts/default.vue
<template>
  <UDashboardLayout>
    <UDashboardPanel>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <template #header>
          <!-- Place anything you like here -->
          <UDashboardSearchButton />
        </template>

        <UDashboardSidebarLinks />

        <UDivider />

        <UDashboardSidebarLinks />

        <template #footer>
          <!-- Place anything you like here -->
        </template>
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>

插槽

页眉
{}
默认
{}
页脚
{}

属性

ui
DeepPartial<{ wrapper: string; container: string; header: string; body: string; footer: string; }>
{}

配置

{
  wrapper: 'flex flex-col w-full flex-1 relative overflow-hidden',
  container: 'flex-grow flex flex-col min-h-0 gap-y-2 py-2',
  header: 'w-full flex flex-col px-4',
  body: 'flex-1 px-4 flex flex-col gap-y-2 overflow-y-auto',
  footer: 'flex items-center justify-between gap-x-1.5 flex-shrink-0 px-4'
}