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>
Banner Behavior
- 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>