bulma-toast
![npm version](https://badge.fury.io/js/bulma-toast.svg)
Bulma's pure JavaScript extension to display toasts. Basically a Bulma's notification implemented as a toast plugin.
Demo
![Screenshot](https://raw.githubusercontent.com/rfoel/bulma-toast/master/screenshot.png)
Options
The plugin comes with 5 options to be used as a JavaScript object:
message
: The actual message to be displayed.type
: Essentially a Bulma's css class. It can be is-primary
, is-link
, is-info
, is-success
, is-warning
, is-danger
, or any other custom class. Default is a whitesmoke background with dark text as shown here.duration
: Duration of the notification in milliseconds. Default is 2000
milliseconds.position
: Position where the notification will be shown. The default is top-right
, so if you want it to be on the top-left just add top-left
to this option. The available options are: top-left
, top-center
, top-right
, center
, bottom-left
, bottom-center
, and bottom-right
.dismissible
: Whether the notification will have a close button or not. Default is false
.pauseOnHover
: Pauses delay when hovering the notification. Default is false
.closeOnClick
: Dismisses the notification when clicked. Default is true
.
Install
npm install --save bulma-toast
Quick Start
-
Link to bulma-toast.min.js
<script src="bulma-toast.min.js"></script>
-
Use bulma-toast to display a toast
bulmaToast.toast({ message: 'Hello There' })
bulmaToast.toast({ message: 'General Kenobi', type: 'is-danger' })
ES Modules
import { toast } from 'bulma-toast'
toast({
message: 'Hello There',
type: 'is-success',
dismissible: true,
})
The Defaults
A simple default object to prevent errors. Your options will be merged with these and the defaults will be used if the fields are not provided.
{
message: 'Your message here',
duration: 2000,
position: 'top-right',
}
Contributing
Can you make this plugin better? Clean the mess I made? Feel free to do so!
- Fork it ( https://github.com/rfoel/bulma-toast/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request