Banner
Muestra un banner en la parte superior de tu sitio web para informar a los usuarios sobre información importante.
xph0000xUso
Nombre
Utilice el prop title para mostrar un título en el banner.
<template>
<UBanner title="This is a banner with an important message." />
</template>xf009xIcon
Utilice el accesorio icon para mostrar un icono en el banner.
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>Color (Edición)
Utilice el soporte color para cambiar el color de la bandera.
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>Cerrar
Utilice el prop close para mostrar un Button para descartar el Banner.
Se emitirá un evento
close cuando se haga clic en el botón de cierre.<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
Cuando se cierra,
banner-${id} se almacenará en el almacenamiento local para evitar que se muestre de nuevo.: br Para el ejemplo anterior, banner-example se almacenará en el almacenamiento local.Para persistir en el estado rechazado a través de las recargas de página, debe especificar un prop.
id Sin un id explícito, el banner solo se ocultará durante la sesión actual y volverá a aparecer en la recarga de página.Cerrar Icono
Utilice el prop close-icon para personalizar el botón de cierre Icon.
<template>
<UBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide-x-circle"
/>
</template>
Acciones
Utilice el prop actions para añadir algunas acciones Button al banner.
<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>Los botones de acción por defecto son
color="neutral" y size="xs". Puede personalizar estos valores pasándolos directamente a cada botón de acción.Xph112xLink
Puede pasar cualquier propiedad del componente <NuxtLink> como to, target, rel, etc.
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>El componente
NuxtLink heredará todos los demás atributos que pase al componente User.Ejemplos
Dentro del app.vue
Utilice el componente Banner en su app.vue o en un diseño:
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 (accesorios)
| 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; } |
Emisiones
| Event | Type |
|---|---|
close | [] |
Temas
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 (Edición española)
No recent changes