当 DashboardSidebar 组件的 collapsible 属性被设置时，DashboardSidebarCollapse 组件用于折叠/展开 DashboardSidebar 组件。
<template>
<UDashboardSidebarCollapse />
</template>
它继承自 Button 组件，因此你可以传递任何属性，例如 color、variant、size 等。
<template>
<UDashboardSidebarCollapse variant="subtle" />
</template>
color="neutral" 和 variant="ghost"。header 插槽中你可以将此组件放置在 DashboardSidebar 组件的 header 插槽中，并使用 collapsed 属性来隐藏标题的左侧部分，例如。
<template>
<UDashboardGroup>
<UDashboardSidebar collapsible>
<template #header="{ collapsed }">
<Logo v-if="!collapsed" />
<UDashboardSidebarCollapse variant="subtle" />
</template>
</UDashboardSidebar>
<slot />
</UDashboardGroup>
</template>
leading 插槽中你可以将此组件放置在 DashboardNavbar 组件的 leading 插槽中，例如在标题之前显示它。
<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>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'button' | any此组件在不是链接时应呈现的元素或组件。 |
color | 'neutral' | "错误" | "中性" | "主要" | "次要" | "成功" | "信息" | "警告" |
variant | 'ghost' | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" |
side | 'left' | "left" | "right"要折叠的侧边栏的侧边。 |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
type | 'button' | "reset" | "submit" | "button"当不是链接时，按钮的类型。 |
label | string | |
activeColor | "错误" | "中性" | "主要" | "次要" | "成功" | "信息" | "警告" | |
activeVariant | "link" | "ghost" | "solid" | "outline" | "soft" | "subtle" | |
尺寸 | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
正方形 | boolean以四边等距内边距渲染按钮。 | |
block | boolean渲染全宽按钮。 | |
loadingAuto | boolean根据 | |
图标 | any根据 | |
avatar | AvatarProps在左侧显示头像。
| |
前置 | boolean当为 | |
leadingIcon | any在左侧显示图标。 | |
尾部 | boolean当为 | |
trailingIcon | any在右侧显示图标。 | |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
ui | { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; } |
export default defineAppConfig({
ui: {
dashboardSidebarCollapse: {
base: 'hidden lg:flex',
variants: {
side: {
left: '',
right: ''
}
}
}
}
})
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: ''
}
}
}
}
})
]
})