THEMETRIAL

Mininal Android Toast Message In JavaScript – js-toastr

Author: rabhinav77
Views Total: 0 views
Official Page: Go to website
Last Update: August 8, 2020
License: MIT

Preview:

Mininal Android Toast Message In JavaScript – js-toastr

Description:

A tiny and easy JavaScript plugin to create minimal-looking, Android-like toast messages (notifications) with 4 themes and 6 position options.

How to use it:

1. Install & Import the js-toastr as a component.

# Yarn
$ yarn add js-toastr

# NPM
$ npm i js-toastr --save
import toastr from 'js-toastr';

2. Or download the package and insert the toast.min.js and toast.min.css into the HTML.

<link rel="stylesheet" href="https://www.cssscript.com/./toast.min.css" />
<script src="./toast.min.js"></script>

3. Create a toast message with the following parameters:

  • Message: Toast message
  • Type: ‘success’, ‘error’, info’, or ‘warning’
  • Duration: Auto dismiss the toast message after this timeout
// toastr.message(message, type, duration);
toastr.message('Success Toast Message', 'success', 5000);
toastr.message('Success Toast Message', 'error', 5000);
toastr.message('Success Toast Message', 'info', 5000);
toastr.message('Success Toast Message', 'warning', 5000);

4. Change the position of the toast message. Default: ‘top-right’.

toastr.setPosition('top-center');
toastr.setPosition('bottom-center');
toastr.setPosition('top-left');
toastr.setPosition('bottom-left');
toastr.setPosition('top-right');
toastr.setPosition('bottom-right');


Source link

Add comment

CATEGORIES

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.