Use a prop title para exibir um título no Banner.
<template>
<NBanner title="This is a banner with an important message." />
</template>
Use a prop icon para exibir um ícone no Banner.
<template>
<NBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>
Use a prop color para alterar a cor do Banner.
<template>
<NBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>
Use a prop close para exibir um Button para dispensar o Banner. O padrão é false.
close será emitido quando o botão de fechar for clicado.<template>
<NBanner id="example" title="This is a closable banner." close />
</template>
banner-${id} será armazenado no local storage para evitar que ele seja exibido novamente. banner-example será armazenado no local storage.id. Sem um id explícito, o banner só ficará oculto na sessão atual e reaparecerá ao recarregar a página.Use a prop close-icon para personalizar o Icon do botão de fechar. O padrão é i-lucide-x.
<template>
<NBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide-x-circle"
/>
</template>
Use a prop actions para adicionar algumas ações de Button ao Banner.
<script setup lang="ts">
import type { ButtonProps } from '@nitro/ui'
const actions = ref<ButtonProps[]>([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<NBanner title="This is a banner with actions." :actions="actions" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nitro/ui'
const actions = ref<ButtonProps[]>([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide-arrow-right'
}
])
</script>
<template>
<NBanner title="This is a banner with actions." :actions="actions" />
</template>
color="neutral" e size="xs". Você pode personalizar esses valores passando-os diretamente para cada botão de ação.Você pode passar qualquer propriedade do componente <NuxtLink>, como to, target, rel, etc.
<template>
<NBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>
NuxtLink herdará todos os outros atributos que você passar para o componente User.app.vueUse o componente Banner no seu app.vue ou em um layout:
<template>
<NApp>
<NBanner icon="i-lucide-construction" title="Nitro UI v4 has been released!" />
<NHeader />
<NMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</NMain>
<NFooter />
</NApp>
</template>
| 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" | "accent" | "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; } |
| Slot | Type |
|---|---|
leading | { ui: object; } |
title | {} |
actions | {} |
close | { ui: object; } |
| Event | Type |
|---|---|
close | [] |
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'
},
accent: {
root: 'bg-accent'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
},
accent: {
root: 'bg-accent'
},
success: {
root: 'bg-success'
},
info: {
root: 'bg-info'
},
warning: {
root: 'bg-warning'
},
error: {
root: 'bg-error'
},
neutral: {
root: 'bg-inverted'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
]
})