O componente FooterColumns renderiza uma lista de colunas para exibir no seu Footer.
Use-o no slot top do componente Footer:
<template>
<NFooter>
<template #top>
<NContainer>
<NFooterColumns />
</NContainer>
</template>
</NFooter>
</template>
Use a prop columns como um array de objetos com as seguintes propriedades:
label: stringchildren?: FooterColumnLink[]Cada coluna contém um array children de objetos que definem os links. Cada link pode ter as seguintes propriedades:
label?: stringicon?: stringclass?: anyui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }Você pode passar qualquer propriedade do componente Link, como to, target, etc.
| Prop | Default | Type |
|---|---|---|
as | 'nav' | anyThe element or component this component should render as. |
columns | FooterColumn<T>[] | |
ui | { root?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; label?: SlotClass; list?: SlotClass; item?: SlotClass; link?: SlotClass; linkLeadingIcon?: SlotClass; linkLabel?: SlotClass; linkLabelExternalIcon?: SlotClass; } |
| Slot | Type |
|---|---|
left | {} |
default | {} |
right | {} |
column-label | { column: FooterColumn<T>; } |
link | { link: T; active: boolean; ui: object; } |
link-leading | { link: T; active: boolean; ui: object; } |
link-label | { link: T; active: boolean; } |
link-trailing | { link: T; active: boolean; } |
export default defineAppConfig({
ui: {
footerColumns: {
slots: {
root: 'xl:grid xl:grid-cols-3 xl:gap-8',
left: 'mb-10 xl:mb-0',
center: 'flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2',
right: 'mt-10 xl:mt-0',
label: 'text-sm font-semibold',
list: 'mt-6 space-y-4',
item: 'relative',
link: 'group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3',
linkLeadingIcon: 'size-5 shrink-0',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed inline-block'
},
variants: {
active: {
true: {
link: 'text-primary font-medium'
},
false: {
link: [
'text-muted hover:text-default',
'transition-colors'
]
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
footerColumns: {
slots: {
root: 'xl:grid xl:grid-cols-3 xl:gap-8',
left: 'mb-10 xl:mb-0',
center: 'flex flex-col lg:grid grid-flow-col auto-cols-fr gap-8 xl:col-span-2',
right: 'mt-10 xl:mt-0',
label: 'text-sm font-semibold',
list: 'mt-6 space-y-4',
item: 'relative',
link: 'group text-sm flex items-center gap-1.5 rounded-sm outline-primary/25 focus-visible:outline-3',
linkLeadingIcon: 'size-5 shrink-0',
linkLabel: 'truncate',
linkLabelExternalIcon: 'size-3 absolute top-0 text-dimmed inline-block'
},
variants: {
active: {
true: {
link: 'text-primary font-medium'
},
false: {
link: [
'text-muted hover:text-default',
'transition-colors'
]
}
}
}
}
}
})
]
})