仪表盘侧边栏折叠

ButtonGitHub
一个用于在桌面端折叠侧边栏的按钮。

用法

DashboardSidebarCollapse 组件用于在其 collapsible 属性被设置时折叠/展开 DashboardSidebar 组件。

<template>
  <UDashboardSidebarCollapse />
</template>

它继承自 Button 组件，因此你可以传递任何属性，例如 color、variant、size 等。

<template>
  <UDashboardSidebarCollapse variant="subtle" />
</template>
按钮默认使用 color="neutral" 和 variant="ghost"。

示例

在 header 插槽中

您可以将此组件放入 DashboardSidebar 组件的 header 插槽中，并使用 collapsed 属性来隐藏标题的左侧部分，例如

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar collapsible>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" />

        <UDashboardSidebarCollapse variant="subtle" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

在 leading 插槽中

您可以将此组件放入 DashboardNavbar 组件的 leading 插槽中，以便在标题之前显示它，例如

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

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #leading>
          <UDashboardSidebarCollapse variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>
  </UDashboardPanel>
</template>

API

属性

属性默认值类型
as

'button'

any

此组件在不是链接时应呈现的元素或组件。

side

'left'

"left" | "right"

color

'neutral'

"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"

variant

'ghost'

"link" | "ghost" | "solid" | "outline" | "soft" | "subtle"

disabled

boolean

尺寸

'md'

"xs" | "sm" | "md" | "lg" | "xl"

ui

{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

主题

app.config.ts
export default defineAppConfig({
  ui: {
    dashboardSidebarCollapse: {
      base: 'hidden lg:flex',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})
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({
      ui: {
        dashboardSidebarCollapse: {
          base: 'hidden lg:flex',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

DashboardSidebar

一个可调整大小和可折叠的侧边栏，用于在仪表盘中显示。

DashboardSidebarToggle

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