使用 title prop 在横幅上显示标题。
<template>
<UBanner title="This is a banner with an important message." />
</template>
使用 icon prop 在横幅上显示图标。
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>
使用 color prop 更改横幅的颜色。
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>
使用 close prop 显示一个按钮来关闭横幅。默认为 false。
close 事件。<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
banner-${id} 将存储在本地存储中，以防止其再次显示。banner-example 将存储在本地存储中。使用 close-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 prop 为横幅添加一些按钮操作。
<script setup lang="ts">
const actions = ref([
{
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"。您可以通过将这些值直接传递给每个操作按钮来定制它们。您可以传递<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 或布局中使用横幅组件
<template>
<UApp>
<UBanner icon="i-lucide-construction" title="Nuxt UI v4 has been released!" />
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
id | '1' | string保存到本地存储的唯一 ID，用于记住横幅是否已被关闭。更改此值可再次显示横幅。 |
图标 | any显示在标题旁边的图标。 | |
title | string | |
actions | ButtonProps[]在标题旁边显示操作列表。
| |
过渡到 | string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric
| |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
close | false | boolean | Omit<ButtonProps, LinkPropsKeys>显示关闭按钮以关闭横幅。 |
closeIcon | appConfig.ui.icons.close | any关闭按钮中显示的图标。 |
ui | { root?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; } |
| 插槽 | 类型 |
|---|---|
前置 | { ui: object; } |
title | {} |
actions | {} |
close | { ui: object; } |
| 事件 | 类型 |
|---|---|
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'
},
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 '@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: ''
}
},
compoundVariants: [
{
color: 'primary',
to: true,
class: {
root: 'hover:bg-primary/90'
}
},
{
color: 'neutral',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
}
],
defaultVariants: {
color: 'primary'
}
}
}
})
]
})