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 |