Uihub

Appearance

Toasts ​

Usage ​

See design usage guidelines

A toast is an element that displays a brief, non-critical message in a way that attracts the user's attention without interrupting the user's task. Toasts should only be used for confirmations, simple notifications, and low-priority alerts that do not need to completely interrupt the user experience.

Toast ​

To use the toast feature make sure you

  1. Import the uihub-core.min.js file in your html file
  2. Create a <div> and add a data-toast attribute to the element. When you want an alert to show, input an alert styled element into the main data-toast element and it shows up on the screen. See below for how the alert styled elements are defined for better understanding
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Library Playground</title>
    <link rel="stylesheet" href="/css/uihub-core.min.css">
    <script src="js/uihub-core.min.js" type="module"></script>
</head>

<body>
    <div data-toast></div>
    ...
</body>
</html>

Element that are inserted into the data-toast element can have attribites

  1. auto-close or auto-close="5000". NB. Which implies that they disappear after the time value(i.e in milliseconds) of the auto-close attribute is reached.
    html
    <div data-toast>
    <div class="alert alert-primary" auto-close="2000">Close me after 2 seconds</div>
</div>
  2. dismisable. NB. User clicks to dismiss the toast
    html
    <div data-toast>
    <div class="alert alert-error" dismisable>Click to close me</div>
</div>
  3. bordered class can be added when the user wants to add a border to the alert
    html
    <div data-toast>
    <div class="alert alert-error bordered" dismisable>Click to close me</div>
</div>

Examples ​

bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur.
multiply
html
<div class="alert alert-warning bordered no-wrap flex flex-start flex-align-start gap-3" auto-close="10000">
    <span class="u-icon u-icon-24 text-warning-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title" cancel>The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur.
        </div>
        <span class="u-icon u-icon-24 text-grey-normal pointer" cancel>multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur.
multiply
html
<div class="alert alert-info bordered no-wrap flex flex-start flex-align-start gap-3" auto-close="10000">
    <span class="u-icon u-icon-24 text-warning-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title" cancel>The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas eligendi, deleniti voluptates sint ea explicabo similique magnam numquam suscipit pariatur.
        </div>
        <span class="u-icon u-icon-24 text-grey-normal pointer" cancel>multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas
multiply
html
<div class="alert alert-success bordered no-wrap flex flex-start flex-align-start gap-3" auto-close="10000">
    <span class="u-icon u-icon-24 text-success-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title" cancel>The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas
            <div class="flex flex-end mt-2">
                <button class="success button-small">Button</button>
            </div>
        </div>
        <span class="u-icon u-icon-24 text-grey-normal pointer" cancel>multiply</span>
    </div>
</div>
bookmark
The Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas
multiply
html
<div class="alert alert-error bordered no-wrap flex flex-start flex-align-start gap-3" auto-close="10000">
    <span class="u-icon u-icon-24 text-error-normal">bookmark</span>
    <div class="flex no-wrap gap-2 flex-align-start width-100">
        <div>
            <span class="title" cancel>The Title</span>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error aut et esse rerum dolorem quae. A molestias quod neque quam quas
            <div class="flex flex-end mt-2">
                <button class="error button-small">Button</button>
            </div>
        </div>
        <span class="u-icon u-icon-24 text-grey-normal pointer" cancel>multiply</span>
    </div>
</div>

Using the API ​

See more details on api in installation

javascript
UIhub.services.toastService.triggerToast(htmlString);

Customisation ​

css
:root {
    --toast-z-index: 1000001;
}

[id^="uihub-toast-"] {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--toast-z-index);
}

Usage Guidelines ​