Customizable Toast Notification Plugin For Bulma Framework

Category: Javascript , Notification | November 30, 2022
Author:rfoel
Views Total:139 views
Official Page:Go to website
Last Update:November 30, 2022
License:MIT

Preview:

Customizable Toast Notification Plugin For Bulma Framework

Description:

A JavaScript plugin for creating customizable toast notifications based on Bulma’s Notification component.

How to use it:

1. Install and import the bulma-toast.

# Yarn
$ yarn add bulma-toast
# NPM
$ npm i bulma-toast
// ES Module
import * as bulmaToast from 'bulma-toast';
// Browser
<script src="https://unpkg.com/bulma-toast"></script>

2. Display a toast on the screen.

// ES Module
toast({
  message: 'Toast Message',
});
// Browser
bulmaToast.toast({
  message: 'Toast Message',
})

3. Set the notification type:

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger
  • or custom CSS class
toast({ 
  message: 'Toast Message', 
  type: 'is-warning',
})

4. Set the position of the toast notification.

  • top-left
  • top-center
  • top-right (default)
  • center
  • bottom-left
  • bottom-center
  • bottom-right
toast({ 
  message: 'Toast Message', 
  position: 'top-center',
})

5. Set the duration of the toast notification. Default: 2000ms.

toast({ 
  message: 'Toast Message', 
  duration: 5000,
})

6. Add in/out animations to the notification. Requires Animate.css.

toast({ 
  message: 'Toast Message', 
  animate: { 
    in: 'fadeIn', 
    out: 'fadeOut' 
  },
})

7. More options.

toast({ 
  closeOnClick: true,
  opacity: 1,
  single: false,
  offsetTop: 0,
  offsetBottom: 0,
  offsetLeft: 0,
  offsetRight: 0,
  extraClasses: '',
})

You Might Be Interested In:


Leave a Reply