Banner
웹 사이트 상단에 배너를 표시하여 사용자에게 중요한 정보를 알려줍니다.
Usage
Title 파일
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
color Prop을 사용하여 배너의 색상을 변경합니다.
<template>
<UBanner color="neutral" icon="i-lucide-info" title="This is a banner with an icon." />
</template>닫기
close 소품을 사용하여 Button 를 표시하여 Banner를 해제합니다. 기본값은 false입니다.
닫기 단추를 클릭하면
close 이벤트가 발생합니다.<template>
<UBanner id="example" title="This is a closable banner." close />
</template>
닫으면
위의 예에서
banner-${id}가 로컬 스토리지에 저장되어 다시 표시되지 않습니다. 위의 예에서
banner-example는 로컬 스토리지에 저장됩니다.페이지를 다시 로드할 때 해제된 상태를 유지하려면
id prop를 지정해야 합니다. 명시적 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 링크
<NuxtLink> 구성 요소에서 to, target, rel 등의 속성을 전달할 수 있습니다.
<template>
<UBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>NuxtLink 구성 요소는 User 구성 요소에 전달된 다른 모든 속성을 상속합니다.예제
xapp.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 (### 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'
}
}
}
})
]
})변경 로그
No recent changes