Banner
ウェブサイトの上部にバナーを表示して、重要な情報をユーザーに知らせます。
使用法
Title
titleプロパティを使用してバナーにタイトルを表示します。
<template>
<UBanner title="This is a banner with an important message." />
</template>Icon
iconプロパティを使用してバナーにアイコンを表示します。
<template>
<UBanner icon="i-lucide-info" title="This is a banner with an icon." />
</template>Color
colorプロパティを使用してバナーの色を変更します。
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>閉じる
closeプロパティを使用してButtonを表示し、バナーを閉じます。デフォルトはfalseです。
closeボタンをクリックすると
closeイベントが発生します。<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
banner-${id}を閉じると、banner-${id}は再び表示されないようにローカルストレージに格納されます。br上の例では、banner-exampleはローカルストレージに格納されます。ページリロード中にsided状態を保持するには、
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プロパティを使用して、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
to、target、relなど、<NuxtLink>コンポーネントから任意のプロパティを渡すことができます。
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>NuxtLinkコンポーネントは、Userコンポーネントに渡す他のすべての属性を継承します。例
xapp.vue内
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>
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; } |
スロット
| 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