@x4b/webcomponent-banner

X4B Webcomponent Banner

This project provides a webcomponent component for the banner

Install

• Install the banner package

npm install @x4b/webcomponent-banner
# or
yarn add @x4b/webcomponent-banner

• Install the fonts

By default, the banner uses the open sans font. In the head of the HTML file, add the following code:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap" />

Example

First, you have to register the webcomponent:

import { register } from './library';

register();

Add the webcomponent to your application:

<x4b-banner
    apps-service-url="https://x4b.dev.xcomponent.com/apps"
    notification-count="3"
    application="scenario"
    version="dev-test"
    language="en"
    languages="en,fr"
></x4b-banner>

You can listen to the following DOM events:

Event	Description	Parameter
languageChanged	Triggered when a language is selected	Selected language
menuToggleButtonClicked	Triggered when the burger button is clicked	Menu state (true -> full size, false -> reduced)
notificationButtonClicked	Triggered when the notification button is clicked	None
tokenRefreshed	Triggered when the token is refreshed	None
startupFinished	Triggered when the banner is initialized	None