Banner
在网站顶部显示横幅，告知用户重要信息。
用法
标题
使用title道具在Banner上显示标题。
<template>
<UBanner title="This is a banner with an important message." />
</template>Icon
使用icon道具在Banner上显示图标。
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>Color
使用color道具更改Banner的颜色。
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>关闭
使用close属性显示Button，以将Banner. banner关闭为false。
当单击关闭按钮时，将发出
close事件。<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
关闭时，
banner-${id}将存储在本地存储中，以防止再次显示。：br对于上面的示例，banner-example将存储在本地存储中。要在页面重新加载时保持解除状态，必须指定
id属性。如果没有显式的id，横幅将仅在当前会话中隐藏，并在页面重新加载时重新显示。关闭图标
使用close-icon道具自定义关闭按钮Icon.i-lucide-x。
<template>
<UBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide-x-circle"
/>
</template>
Actions
使用actions属性向Banner添加一些Button操作。
<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>操作按钮默认为
color="neutral"和size="xs"。您可以通过将这些值直接传递给每个操作按钮来自定义这些值。Link
您可以从<NuxtLink>组件传递任何属性，如to、target、rel等。
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>NuxtLink组件将继承您传递给User组件的所有其他属性。示例
内部app.vue
在app.vue或布局中使用Banner组件：
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 | [] |
Theme
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
No recent changes