仪表盘侧边栏
一个可滚动容器,用于在仪表盘面板内显示链接。
用法
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'
}