Banner
Affichez une bannière en haut de votre site Web pour informer les utilisateurs des informations importantes.
Utilisation
Titre
Utilisez le prop title pour afficher un titre sur la bannière.
<template>
<UBanner title="This is a banner with an important message." />
</template>icône
Utilisez le prop icon pour afficher une icône sur la bannière.
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>couleur
Utilisez le prop color pour changer la couleur de la bannière.
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>Fermer
Utilisez la prop close pour afficher un Button pour rejeter la bannière.
Un événement
close sera émis lorsque le bouton Fermer est cliqué.<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
Une fois fermé,
banner-${id} sera stocké dans le stockage local pour l'empêcher de s'afficher à nouveau.: br Pour l'exemple ci-dessus, banner-example sera stocké dans le stockage local.Pour conserver l'état rejeté à travers les rechargements de page, vous devez spécifier une prop.
id Sans un id explicite, la bannière ne sera cachée que pour la session en cours et réapparaîtra lors du rechargement de page.Fermer l'icône
Utilisez la prop close-icon pour personnaliser le bouton de fermeture Icon.
<template>
<UBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide-x-circle"
/>
</template>
Vous pouvez personnaliser cette icône globalement dans votre
app.config.ts sous la touche ui.icons.close.Vous pouvez personnaliser cette icône globalement dans votre
vite.config.ts sous la touche ui.icons.close.Actions
Utilisez la prop actions pour ajouter des actions Button à la bannière.
<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'
const actions = ref<ButtonProps[]>([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UBanner title="This is a banner with actions." :actions="actions" />
</template><script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nuxt/ui'
const actions = ref<ButtonProps[]>([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<UBanner title="This is a banner with actions." :actions="actions" />
</template>Les boutons d'action par défaut sont
color="neutral" et size="xs". Vous pouvez personnaliser ces valeurs en les transmettant directement à chaque bouton d'action.Link équipé
Vous pouvez passer n'importe quelle propriété du composant <NuxtLink> telle que to, target, rel, etc.
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>Le composant
NuxtLink héritera de tous les autres attributs que vous passez au composant User.Exemples
Dans app.vue
Utilisez le composant Bannière dans votre app.vue ou dans une mise en page:
app.vue
<template>
<UApp>
<UBanner icon="i-lucide-construction" title="Nuxt UI v4 has been released!" />
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
id | stringA unique id saved to local storage to remember if the banner has been dismissed. Without an explicit id, the banner will not be persisted and will reappear on page reload. | |
icon | anyThe icon displayed next to the title. | |
title | string | |
actions | ButtonProps[]Display a list of actions next to the title.
| |
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string | |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
close | false | boolean | Omit<ButtonProps, LinkPropsKeys> Display a close button to dismiss the banner.
|
closeIcon | appConfig.ui.icons.close | anyThe icon displayed in the close button. |
ui | { root?: SlotClass; container?: SlotClass; left?: SlotClass; center?: SlotClass; right?: SlotClass; icon?: SlotClass; title?: SlotClass; actions?: SlotClass; close?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
leading | { ui: object; } |
title | {} |
actions | {} |
close | { ui: object; } |
Emits
| Event | Type |
|---|---|
close | [] |
Thème
app.config.ts
export default defineAppConfig({
ui: {
banner: {
slots: {
root: [
'relative z-50 w-full',
'transition-colors'
],
container: 'flex items-center justify-between gap-3 h-12',
left: 'hidden lg:flex-1 lg:flex lg:items-center',
center: 'flex items-center gap-1.5 min-w-0',
right: 'lg:flex-1 flex items-center justify-end',
icon: 'size-5 shrink-0 text-inverted pointer-events-none',
title: 'text-sm text-inverted font-medium truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
},
variants: {
color: {
primary: {
root: 'bg-primary'
},
secondary: {
root: 'bg-secondary'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: {
root: 'outline-(--ui-bg)/25 -outline-offset-3 has-[>a:focus-visible]:outline-3'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})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: {
banner: {
slots: {
root: [
'relative z-50 w-full',
'transition-colors'
],
container: 'flex items-center justify-between gap-3 h-12',
left: 'hidden lg:flex-1 lg:flex lg:items-center',
center: 'flex items-center gap-1.5 min-w-0',
right: 'lg:flex-1 flex items-center justify-end',
icon: 'size-5 shrink-0 text-inverted pointer-events-none',
title: 'text-sm text-inverted font-medium truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: 'text-inverted hover:bg-default/10 focus-visible:bg-default/10 -me-1.5 lg:me-0'
},
variants: {
color: {
primary: {
root: 'bg-primary'
},
secondary: {
root: 'bg-secondary'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: {
root: 'outline-(--ui-bg)/25 -outline-offset-3 has-[>a:focus-visible]:outline-3'
}
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
]
})Changelog écrit
No recent changes