v2.4.1

Banner

Top banner for important user messages.
GitHub
Nuxt UI

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.
<template>
  <B24Banner id="example" title="The subscription trial has ended. Subscribe to continue using all apps." close />
</template>
When closed, 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.

<script setup lang="ts">
import CircleCrossIcon from '@bitrix24/b24icons-vue/outline/CircleCrossIcon'
</script>

<template>
  <B24Banner
    title="The subscription trial has ended. Subscribe to continue using all apps."
    close
    :close-icon="CircleCrossIcon"
  />
</template>

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

Prop Default Type
as'div'any

The element or component this component should render as.

id string

A 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.

iconIconComponent

The icon displayed next to the title.

title string
actions ButtonProps[]

Display a list of actions next to the title. { color: 'air-secondary-no-accent', size: 'xs' }

to string | kt | Tt
target null | "_blank" | "_parent" | "_self" | "_top" | string & {}
color'air-primary-alert'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary"
closefalseboolean | Omit<ButtonProps, LinkPropsKeys>

Display a close button to dismiss the banner. { size: 'md', color: 'air-tertiary-no-accent' }

closeIconicons.closeIconComponent

The icon displayed in the close button.

b24ui { root?: ClassNameValue; container?: ClassNameValue; left?: ClassNameValue; center?: ClassNameValue; right?: ClassNameValue; icon?: ClassNameValue; title?: ClassNameValue; actions?: ClassNameValue; close?: ClassNameValue; }

Slots

Slot Type
leading{ b24ui: object; }
title{}
actions{}
close{ b24ui: object; }

Emits

Event Type
close[]

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'
          }
        }
      }
    })
  ]
})

Badge

A short descriptor for a status or category.

Button

A button capable of linking or performing an action.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24