Banner

Overview

The BaseBanner Component is a versatile notification banner designed for displaying messages to users in a Vue 3 application. It supports different types of messages (success, error, info, warning) and can be closed by the user, with the state being remembered in the session storage.

Basic Usage

To include the BaseBanner Component in your Vue 3 project, import it as follows:

vue
import BaseBanner from 'UiKit/components/BaseBanner/BaseBanner.vue';
Example

Here’s how to use the component in your template:

vue
<BaseBanner
  storeKey="unique-banner-key"
  show
  type="success"
>
  Your changes have been saved successfully!
</BaseBanner>

Props

The BaseBanner Component accepts the following props:

  • storeKey (string, required): A unique key used for storing the closed state of the banner in session storage. This ensures the banner remains closed for the current session after the user dismisses it.
  • show (boolean, required): Controls the visibility of the banner. When set to true, the banner will be displayed.
  • type (string, optional): Specifies the type of the banner, which determines its appearance. Available values are:
    • success (default)
    • error
    • info
    • warning

Slots

The BaseBanner Component supports the following slots:

  • default: This slot is used to provide the content to be displayed within the banner.
  • closeIcon: This slot allows you to customize the close icon. If not provided, a default SVG icon will be displayed.
Example with Custom Close Icon
vue
<BaseBanner
  storeKey="banner-key"
  show
  type="info"
>
  This is an informational banner.
  <template #closeIcon>
    <svg><!-- Your custom icon SVG --></svg>
  </template>
</BaseBanner>
  • The banner's visibility is controlled by the show prop.
  • When the banner is closed using the close button, its state is saved in session storage. The next time the user navigates to the page, the banner will not be displayed if it was closed previously during that session.
  • The close button triggers the closeBanner method, which updates the visibility state and stores it in session storage.

Styles

The component-specific styles are found in ui-kit/src/components/BaseBanner/index.sass.

Complete Example

Here’s a complete example of using the BaseBanner Component with a success message:

vue
<script setup lang="ts">
import BaseBanner from 'UiKit/components/BaseBanner/BaseBanner.vue';

const showBanner = ref(true);
</script>

<template>
  <BaseBanner
    storeKey="session-banner"
    :show="showBanner"
    type="success"
  >
    Your profile has been updated successfully!
  </BaseBanner>
</template>
Help Ukraine to stop russian aggression