Getting started

Core

Utilities

Layout systems

Design

Components

Form elements

Others

Layout

JTB-Notification

An interactive notification component with headers, icons, and actions.

About

The JTB-Notification is an interactive notification component designed to display messages with headers, icons, and optional action buttons. It enhances user experience by providing contextual information in a concise yet detailed manner.

With customizable styles, animations, and flexible layouts, JTB-Notification is suitable for various use cases, from simple alerts to actionable notifications that require user response.

How to use

Notifications are typically created dynamically rather than during page load due to their nature. Therefore, this documentation focuses on the dynamic creation of notification elements instead of static implementation. To integrate a JTB-Notification element into your project, use the <jtb-notification> tag according to your requirements. Once the element is properly initialized, JTB_MD will process your request and render the notification as specified.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Assign Content -----*/ myelement.content = 'Hello from notification!'; /*----- Trigger its show method to make it visible -----*/ myelement.show()

Customization

As demonstrated in the example above (Creating a notification element), you can customize the JTB-Notification element by applying one (or more) of its pre-defined attributes with the corresponding values. These attributes allow you to tailor the element to meet your specific requirements and preferences via modifying its behavior, functionality, appearance, design etc.

Content and display

content

To specify the notification's content, whether as plain text or HTML, use the element's content attribute.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Assign content -----*/ myelement.content = 'This one has basic text.'; // Plain text myelement.content = 'This one has <b style="color: red;">HTML!</b>'; // HTML

header

To add a header to your notification element, you can use its header attribute. Both, html and plain texts are valid.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Assign header -----*/ myelement.header = 'Normal header!'; // Plain text myelement.header = '<b style="color: red;">HTML</b> Header!'; // HTML

icon

To use an icon in your notification, simply set the icon attribute with the identifier of your desired icon.

By default, the icon template is set to: <i class='{icon}'></i> where {icon} serves as a placeholder that will be replaced by the value of the icon attribute.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Assign icon -----*/ myelement.icon = 'jtbi-l-heart';

Instead of using the default template, you can also specify your own custom template to generate icons exactly the way you want. Simply define your desired structure using the icon_template attribute, where {icon} will be replaced by the value of the icon attribute.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Define your template -----*/ myelement.icon_template = '<svg class="jtbi" style="--size:1.5rem;"><use xlink:href="{icon}"></use></svg>'; /*----- Add icon -----*/ myelement.icon = 'images/jtbicons/svg-sprites/linear.svg#heart';

closable

To make your notification element closable, simply apply closable attribute into it.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Make it closable -----*/ myelement.closable = true;

duration

To adjust the duration for which a notification remains visible, use the duration attribute with a value in seconds. If you do not specify it, the library automatically assigns it as 4.

// No need to do anything :)

position

To set position of your notification element, simply apply position attribute into it.

Available positions are:

TL: Top-Left
TC: Top-Center
TR: Top-Right - This one is default value.
BR: Bottom-Right
BC: Bottom-Center
BL: Bottom-Left

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Make it closable -----*/ myelement.position = 'TL'; // Top-Left myelement.position = 'TC'; // Top-Center myelement.position = 'TR'; // Top-Right myelement.position = 'BR'; // Bottom-Right myelement.position = 'BC'; // Bottom-Center myelement.position = 'BL'; // Bottom-Left

stacking

By default, all notification-containers are configured to display a maximum of three notification elements if no interaction occurs. Upon the addition of a fourth notification, the container automatically collapses to preserve screen space, eliminating the need for any special adjustments to enable collapsibility. When a user interacts with a collapsed container, it automatically expands to reveal all notifications within.

// No need to do anything :)

Style and appearance

color

To enable your notification element use a color palette from JTB_MD, specify the desired palette using the color attribute.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Adjust color -----*/ myelement.color = 'purple'; // Set color = purple myelement.color = 'blue'; // Set color = blue myelement.color = 'aqua'; // Set color = aqua myelement.color = 'green'; // Set color = green myelement.color = 'lime'; // Set color = lime myelement.color = 'yellow'; // Set color = yellow myelement.color = 'orange'; // Set color = orange myelement.color = 'volcano'; // Set color = volcano myelement.color = 'red'; // Set color = red

shape

To change the shape of the notification element, use the shape attribute with your desired value.

Available options are: default | rect.

/*----- Create element -----*/ var myelement = document.createElement('jtb-notification'); /*----- Adjust shape -----*/ myelement.shape = 'default'; // Set shape = default myelement.shape = 'rect'; // Set shape = rect

Listeners & Callbacks

JTB Notifications are components built upon the jtbComponent element. As a result, they inherit all global listeners and callbacks, ensuring consistent event handling. For a detailed overview, refer to the Base component - Core page.

Methods

Similar to listeners and callbacks, JTB Notifications also inherit all methods from the base component, enabling seamless functionality. For a complete list of available methods, visit the Base component - Core page.

API

While each property on its own brings unique changes to the elements, combining them can help you create the perfect one.

For making it easier to navigate through all the attributes, we’ve created a comprehensive table for you. Below, you can find a list of all and their uses.