BannerPRO
用法
标题
使用 title prop 在横幅上显示标题。
<template>
<UBanner title="This is a banner with an important message." />
</template>
Icon
使用 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 prop 自定义关闭按钮 图标。默认为 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"。你可以通过直接将这些值传递给每个操作按钮来定制它们。Link
你可以传递来自<NuxtLink>组件的任何属性，例如 to、target、rel 等。
<template>
<UBanner
to="https://github.com/nuxt/ui-pro"
target="_blank"
title="Purchase Nuxt UI Pro and get access to all components."
color="primary"
/>
</template>
NuxtLink 组件将继承你传递给 User 组件的所有其他属性。示例
在 app.vue 中
在你的 app.vue 或布局中使用 Banner 组件
<template>
<UApp>
<UBanner icon="i-lucide-construction" title="Nuxt UI v3 has been released!" />
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</UApp>
</template>
API
Props
| Prop | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
icon |
标题旁边显示的图标。 | |
close |
|
显示一个关闭按钮以关闭横幅。 |
color |
|
|
target |
| |
to |
| |
title |
| |
id |
|
一个保存在本地存储中的唯一 ID，用于记住横幅是否已被关闭。更改此值可以再次显示横幅。 |
actions |
在标题旁边显示操作列表。
| |
关闭图标 |
|
关闭按钮中显示的图标。 |
UI 配置 |
|
插槽
| 插槽 | 类型 |
|---|---|
leading |
|
title |
|
actions |
|
close |
|
事件
| 事件 | 类型 |
|---|---|
close |
|
主题
export default defineAppConfig({
uiPro: {
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({
uiPro: {
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 uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
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'
}
}
}
})
]
})