Use the title prop to display a title on the Banner.
<template>
<PBanner title="This is a banner with an important message." />
</template>
Use the icon prop to display an icon on the Banner.
<template>
<PBanner icon="i-lucide:info" title="This is a banner with an icon." />
</template>
Use the color prop to change the color of the Banner.
<template>
<PBanner color="neutral" icon="i-lucide:info" title="This is a banner with an icon." />
</template>
Use the close prop to display a Button to dismiss the Banner. Defaults to false.
close event will be emitted when the close button is clicked.<template>
<PBanner id="example" title="This is a closable banner." close />
</template>
banner-${id} will be stored in the local storage to prevent it from being displayed again. banner-example will be stored in the local storage.Use the close-icon prop to customize the close button Icon. Defaults to i-lucide:x.
<template>
<PBanner
title="This is a closable banner with a custom close icon."
close
close-icon="i-lucide:x-circle"
/>
</template>
Use the actions prop to add some Button actions to the Banner.
<script setup lang="ts">
const actions = ref([
{
label: 'Action 1',
variant: 'outline'
},
{
label: 'Action 2',
trailingIcon: 'i-lucide:arrow-right'
}
])
</script>
<template>
<PBanner title="This is a banner with actions." :actions="actions" />
</template>
color="neutral" and size="xs". You can customize these values by passing them directly to each action button.You can pass any property from the <NuxtLink> component such as to, target, rel, etc.
<template>
<PBanner
to="https://nuxtlabs.com/"
target="_blank"
title="NuxtLabs is joining Vercel!"
color="primary"
/>
</template>
NuxtLink component will inherit all other attributes you pass to the User component.app.vueUse the Banner component in your app.vue or in a layout:
<template>
<PApp>
<PBanner icon="i-lucide:construction" title="Pohon UI v4 has been released!" />
<PHeader />
<PMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</PMain>
<PFooter />
</PApp>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
Below is the theme configuration skeleton for the PBanner. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
banner: {
slots: {
root: '',
container: '',
left: '',
center: '',
right: '',
icon: '',
title: '',
actions: '',
close: ''
},
variants: {
color: {
primary: {
root: ''
},
secondary: {
root: ''
},
success: {
root: ''
},
info: {
root: ''
},
warning: {
root: ''
},
error: {
root: ''
},
neutral: {
root: ''
}
},
to: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
banner: {
slots: {
root: '',
container: '',
left: '',
center: '',
right: '',
icon: '',
title: '',
actions: '',
close: ''
},
variants: {
color: {
primary: {
root: ''
},
secondary: {
root: ''
},
success: {
root: ''
},
info: {
root: ''
},
warning: {
root: ''
},
error: {
root: ''
},
neutral: {
root: ''
}
},
to: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary'
}
}
}
};