侧边栏
一个粘性 <aside>，带有可自定义的插槽和锚点。
用法
该 Aside 组件将实例化一个粘性的 <aside> 元素，仅在 lg 断点后显示，并且 min-height 基于 --header-height 变量.
使用 links 道具在侧边栏顶部显示链接列表，并使用 #top 或 #bottom 插槽在链接上方或下方显示内容。
<script setup lang="ts">
const links = [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: '/getting-started'
}, {
label: 'Playground',
icon: 'i-simple-icons-stackblitz',
to: '/playground'
}, {
label: 'Roadmap',
icon: 'i-heroicons-map',
to: '/roadmap'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro'
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}]
const pageLinks = [{
icon: 'i-heroicons-heart',
label: 'Learn how to contribute',
to: '/getting-started/contributing',
target: '_blank'
}]
</script>
<template>
<UAside :links="links">
<template #top>
<UContentSearchButton />
</template>
<Placeholder class="h-60" />
<template #bottom>
<UDivider type="dashed" class="my-6" />
<UPageLinks :links="pageLinks" />
</template>
</UAside>
</template>
您通常会在 #left 插槽中使用此组件 Page，并在其中包含 NavigationTree.
layouts/docs.vue
<template>
<UContainer>
<UPage>
<template #left>
<UAside :links="links">
<UNavigationTree :links="navigationLinks" default-open :multiple="false" />
</UAside>
</template>
<slot />
</UPage>
</UContainer>
</template>
插槽
顶部
{}
链接
{}
默认
{}
底部
{}
道具
ui
DeepPartial<{ wrapper: string; top: { wrapper: string; header: string; body: string; footer: string; }; }>
{}链接
AsideLink[]
[]配置
{
wrapper: 'hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-var(--header-height))] lg:sticky lg:top-[--header-height] py-8 lg:px-4 lg:-mx-4',
top: {
wrapper: 'sticky -top-8 -mt-8 pointer-events-none z-[1]',
header: 'h-8 bg-background -mx-4 px-4',
body: 'bg-background relative pointer-events-auto flex -mx-4 px-4',
footer: 'h-8 bg-gradient-to-b from-background -mx-4 px-4'
}
}