Usage
Title
Use the title prop to display a title on the Banner.
<template>
<B24Banner title="The subscription trial has ended. Subscribe to continue using all apps." />
</template>
Icon
Use the icon prop to display an icon on the Banner.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Banner
:icon="RocketIcon"
title="The subscription trial has ended. Subscribe to continue using all apps."
/>
</template>
Color
Use the color prop to change the color of the Banner.
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Banner
color="air-secondary-alert"
:icon="RocketIcon"
title="The subscription trial has ended. Subscribe to continue using all apps."
/>
</template>
Close
Use the close prop to display a Button to dismiss the Banner. Defaults to false.
A
close event will be emitted when the close button is clicked.When closed,
For the example above,
banner-${id} will be stored in the local storage to prevent it from being displayed again. For the example above,
banner-example will be stored in the local storage.To persist the dismissed state across page reloads, you must specify an
id prop. Without an explicit id, the banner will only be hidden for the current session and will reappear on page reload.Close Icon
Use the close-icon prop to customize the close button Icon. Defaults to CrossMIcon.
Actions
Use the actions prop to add some Button actions to the Banner.
<script setup lang="ts">
import { RocketIcon } from '@bitrix24/b24icons-vue/main/RocketIcon'
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'
const actions = ref<ButtonProps[]>([
{
label: 'Buy a subscription',
color: 'air-primary'
},
{
label: 'Open scanner',
color: 'air-secondary-accent-2'
}
])
</script>
<template>
<B24Banner
title="The subscription trial has ended. Subscribe to continue using all apps."
:actions="actions"
/>
</template>
The action buttons default to
color="air-secondary-no-accen" and size="xs". You can customize these values by passing them directly to each action button.Link
You can pass any property from the <NuxtLink> component such as to, target, rel, etc.
<template>
<B24Banner
to="https://apidocs.bitrix24.com/"
target="_blank"
title="Explore the Bitrix24 REST API"
color="air-primary"
/>
</template>
The
NuxtLink component will inherit all other attributes you pass to the Banner component.Examples
Within app.vue
Use the Banner component in your app.vue or in a layout:
app.vue
<template>
<B24App>
<B24Banner
:icon="Bitrix24Icon"
title="Explore the Bitrix24 REST API"
to="https://apidocs.bitrix24.com/"
/>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</B24App>
</template>
API
Props
Slots
Emits
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
banner: {
slots: {
root: 'relative z-50 w-full bg-(--b24ui-background) 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-(--b24ui-color) pointer-events-none',
title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) text-(--b24ui-color) font-(--ui-font-weight-medium) truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: '[--ui-btn-color:var(--b24ui-color)] hover:bg-(--ui-color-base-white-fixed)/10 focus-visible:bg-(--ui-color-base-white-fixed)/10 -me-1.5 lg:me-0'
},
variants: {
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
},
'air-secondary': {
root: 'style-tinted'
},
'air-secondary-alert': {
root: 'style-tinted-alert'
},
'air-secondary-accent': {
root: 'style-outline'
},
'air-secondary-accent-1': {
root: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
root: 'style-outline-accent-2'
},
'air-tertiary': {
root: 'style-outline-no-accent'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
to: true,
class: {
root: 'hover:bg-(--b24ui-background)/90'
}
}
],
defaultVariants: {
color: 'air-primary-alert'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
banner: {
slots: {
root: 'relative z-50 w-full bg-(--b24ui-background) 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-(--b24ui-color) pointer-events-none',
title: 'text-(length:--ui-font-size-sm)/(--ui-font-line-height-sm) text-(--b24ui-color) font-(--ui-font-weight-medium) truncate',
actions: 'flex gap-1.5 shrink-0 isolate',
close: '[--ui-btn-color:var(--b24ui-color)] hover:bg-(--ui-color-base-white-fixed)/10 focus-visible:bg-(--ui-color-base-white-fixed)/10 -me-1.5 lg:me-0'
},
variants: {
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
},
'air-secondary': {
root: 'style-tinted'
},
'air-secondary-alert': {
root: 'style-tinted-alert'
},
'air-secondary-accent': {
root: 'style-outline'
},
'air-secondary-accent-1': {
root: 'style-outline-accent-1'
},
'air-secondary-accent-2': {
root: 'style-outline-accent-2'
},
'air-tertiary': {
root: 'style-outline-no-accent'
}
},
to: {
true: ''
}
},
compoundVariants: [
{
to: true,
class: {
root: 'hover:bg-(--b24ui-background)/90'
}
}
],
defaultVariants: {
color: 'air-primary-alert'
}
}
}
})
]
})