Footercolumns Bearbeiten
Eine Liste von Links als Spalten, die in Ihrer Fußzeile angezeigt werden sollen.
Bearbeiten
Die Komponente FooterColumns rendert eine Liste von Spalten, die in Ihrer Fußzeile angezeigt werden sollen.
Verwenden Sie es im top-Steckplatz der Footer-Komponente:
<template>
<UFooter>
<template #top>
<UContainer>
<UFooterColumns />
</UContainer>
</template>
</UFooter>
</template>
columns (Deutsche Ausgabe)
Verwenden Sie die columns-prop als Array von Objekten mit den folgenden Eigenschaften:
label: string(nicht vorhanden)children?: FooterColumnLink[](nicht)
Jede Spalte enthält ein children-Array mit Objekten, die die Links definieren. Jeder Link kann die folgenden Eigenschaften haben:
label?: string(nicht)icon?: string(nicht vorhanden)class?: any(nicht vorhanden)ui?: { item?: ClassNameValue, link?: ClassNameValue, linkLabel?: ClassNameValue, linkLabelExternalIcon?: ClassNameValue, linkLeadingIcon?: ClassNameValue }(nicht vorhanden)
Sie können jede Eigenschaft der Komponente Link übergeben, z. B. to, target usw.
<script setup lang="ts">
import type { FooterColumn } from '@nuxt/ui'
const columns: FooterColumn[] = [
{
label: 'Community',
children: [
{
label: 'Nuxters',
to: 'https://nuxters.nuxt.com',
target: '_blank'
},
{
label: 'Video Courses',
to: 'https://masteringnuxt.com/nuxt3?ref=nuxt',
target: '_blank'
},
{
label: 'Nuxt on GitHub',
to: 'https://github.com/nuxt',
target: '_blank'
}
]
},
{
label: 'Solutions',
children: [
{
label: 'Nuxt Content',
to: 'https://content.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt DevTools',
to: 'https://devtools.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt Image',
to: 'https://image.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/',
target: '_blank'
}
]
}
]
</script>
<template>
<UFooterColumns :columns="columns">
<template #right>
<UFormField name="email" label="Subscribe to our newsletter" size="lg">
<UInput type="email" class="w-full">
<template #trailing>
<UButton type="submit" size="xs" color="neutral" label="Subscribe" />
</template>
</UInput>
</UFormField>
</template>
</UFooterColumns>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { FooterColumn } from '@nuxt/ui'
const columns: FooterColumn[] = [
{
label: 'Community',
children: [
{
label: 'Nuxters',
to: 'https://nuxters.nuxt.com',
target: '_blank'
},
{
label: 'Video Courses',
to: 'https://masteringnuxt.com/nuxt3?ref=nuxt',
target: '_blank'
},
{
label: 'Nuxt on GitHub',
to: 'https://github.com/nuxt',
target: '_blank'
}
]
},
{
label: 'Solutions',
children: [
{
label: 'Nuxt Content',
to: 'https://content.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt DevTools',
to: 'https://devtools.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt Image',
to: 'https://image.nuxt.com/',
target: '_blank'
},
{
label: 'Nuxt UI',
to: 'https://ui.nuxt.com/',
target: '_blank'
}
]
}
]
</script>
<template>
<UFooterColumns :columns="columns">
<template #right>
<UFormField name="email" label="Subscribe to our newsletter" size="lg">
<UInput type="email" class="w-full">
<template #trailing>
<UButton type="submit" size="xs" color="neutral" label="Subscribe" />
</template>
</UInput>
</UFormField>
</template>
</UFooterColumns>
</template>API (englisch)
Props Bearbeiten
| 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; } |
Slots Bearbeiten
| 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; } |
Theme (englisch)
app.config.ts
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'
]
}
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/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'
]
}
}
}
}
}
})
]
})Changelog (englisch)
No recent changes