Skip to content

Latest commit

 

History

History
92 lines (67 loc) · 2.62 KB

README.md

File metadata and controls

92 lines (67 loc) · 2.62 KB
Raw

zToaster is a vanilla javascript library that provides an easy way to show toast notifications.

It's lightweight and easily customizable.

Project web, documentation & support

Basic usage

Place the stylesheet link into the head before all other stylesheets to load the CSS.

<link href="ztoaster.min.css" rel="stylesheet">

Place the script near the end of your pages, right before the closing body tag.

<script src="ztoaster.min.js"></script>

Create your first toast!

ztoast("Here we go!");

Parameters

ztoast(content, options);

content is a string and options is a JSON.

Options

Key Description Values
type Notification style. success, info, warning, error, dark
Default: success
title Notification title.
position Position relative to the viewport. top-right, top-left, top-center, top-full, bottom-right, bottom-left, bottom-center, bottom-full
Default: top-right
width Width of the toast. Any accepted size format.
Default: 350px
duration Time in microseconds.
3000 = 3 seconds		 0 or any number equal or bigger than 1000
0 = toast stays forever
Default: 3000
showIcon Show / Hide icon. true, false
Default: true
icon Icon to be displayed. Will override the icon of the selected type. HTML Unicode Symbols
showClose Show / Hide close button. true, false
Default: true
textColor Text color. Will override the styles of the selected type. Any accepted color format.
backgroundColor Background colour. Will override the styles of the selected type. Any accepted color format.
newerOnTop Newer notification will be displayed on top. true, false
Default: true

Examples

Different types of notifications.

ztoast("Here we go!", {type:"success"});
ztoast("Here we go!", {type:"info"});
ztoast("Here we go!", {type:"warning"});
ztoast("Here we go!", {type:"error"});
ztoast("Here we go!", {type:"dark"});

With title

ztoast("Here we go!", {type:"info", title:"Hello toast"});

Changing position

ztoast("Here we go!", {type:"info", title:"Hello toast", position:"bottom-center"});

Creating a custom pink notification

let title = "I'm a pink toast!";
let content = `Lorem ipsum dolor sit amet, consectetur adipisicing elit.`;

ztoast(content, {
    title,
    type:"info",
    position:"top-center",
    textColor: "#666",
    backgroundColor: "pink",
    icon: "&#9850;",
    showClose: false
});

Demo and examples