页脚
一个响应式 <footer> 组件。
用法
使用 links 属性在页脚的中心显示一个链接列表。您也可以使用 #left、#center 和 #right 插槽对其进行进一步自定义。
<script setup lang="ts">
const links = [{
label: 'Nuxt UI',
to: 'https://ui.nuxtjs.org.cn/'
}, {
label: 'Nuxt Docs',
to: 'https://nuxtjs.org.cn'
}, {
label: 'Nuxt Studio',
to: 'https://nuxt.studio'
}]
</script>
<template>
<UFooter :links="links">
<template #left>
Copyright © {{ new Date().getFullYear() }}
</template>
<template #right>
<UButton icon="i-simple-icons-x" color="gray" variant="ghost" to="https://x.com/nuxt_js" target="_blank" />
<UButton icon="i-simple-icons-discord" color="gray" variant="ghost" to="https://discord.com/invite/ps2h6QT" target="_blank" />
<UButton icon="i-simple-icons-github" color="gray" variant="ghost" to="https://github.com/nuxt/nuxt" target="_blank" />
</template>
</UFooter>
</template>
还有一个可用的
#top 插槽，请查看 FooterColumns 组件。插槽
顶部
{}
右边
{}
中间
{}
左边
{}
属性
ui
DeepPartial<{ wrapper: string; top: { wrapper: string; container: string; }; bottom: { wrapper: string; container: string; left: string; center: string; right: string; }; }>
{}links
FooterLink[]
[]配置
{
wrapper: 'relative',
top: {
wrapper: '',
container: 'py-8 lg:py-12'
},
bottom: {
wrapper: '',
container: 'py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3',
left: 'flex items-center justify-center lg:justify-start lg:flex-1 gap-x-1.5 mt-3 lg:mt-0 lg:order-1',
center: 'mt-3 lg:mt-0 lg:order-2 flex items-center justify-center',
right: 'lg:flex-1 flex items-center justify-center lg:justify-end gap-x-1.5 lg:order-3'
}
}