Bulma's pure JavaScript extension to display toasts. Basically a Bulma's notification implemented as a toast plugin.
This should be a 1:1 copy of the original repository but built to support ES5.
To use it, use npm install https://github.com/KeeeX/bulma-toast.git`.
The plugin comes with 5 options to be used as a JavaScript object:
message: The actual message to be displayed. It can be a string, a template string, or a DOM node. See examples.type: Essentially a Bulma's css class. It can beis-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 is2000milliseconds.position: Position where the notification will be shown. The default istop-right, so if you want it to be on the top-left just addtop-leftto this option. The available options are:top-left,top-center,top-right,center,bottom-left,bottom-center, andbottom-right.dismissible: Whether the notification will have a close button or not. Default isfalse.pauseOnHover: Pauses delay when hovering the notification. Default isfalse.closeOnClick: Dismisses the notification when clicked. Default istrue.opacity: The notification's container opacity. Default is1.animate: See here. Default is no animations.
This repository is not on the central npm site to not conflict with the normal, non babelified one.
npm install --save https://github.com/KeeeX/bulma-toast.git
- 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" });bulmaToast.setDoc(window.document);This can be changed before each toast call and can be set to eny element.
// Import the toast function
import * as bulmaToast from "bulma-toast";
// Or use
// import { toast as superToast } from 'bulma-toast'
// to rename your import
toast({
message: "Hello There",
type: "is-success",
dismissible: true,
animate: { in: "fadeIn", out: "fadeOut" }
});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",
closeOnClick: true,
opacity: 1
}Bulma Toast supports animate.css (and maybe others?). You MUST include animate.css on your document's <head>
<head>
<link rel="stylesheet" href="animate.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<!-- or -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>Accepts a object with in and out with css classes to add animations. Using Animate.css you would pass a object like this:
{
message: "I'm animated! Yay!",
duration: 2000,
position: "top-right",
animate: { in: 'fadeIn', out: 'fadeOut' }
}Warning: Don't use opacity when using animations. Some of them use the opacity property like fade in and fade out.
import { toast } from "bulma-toast";
toast({
message: "Hello There",
type: "is-success",
dismissible: true,
pauseOnHover: true
});
toast({
message: "<h1>LOOK HERE</h1>",
type: "is-danger",
dismissible: true,
pauseOnHover: true,
animate: { in: "fadeIn", out: "fadeOut" }
});
const myMessage = `It's ${new Date().toDateString()}`;
toast({
message: myMessage,
type: "is-primary",
position: "center",
closeOnClick: true,
pauseOnHover: true,
opacity: 0.8
});
const elm = document.createElement("a");
elm.text = "Visit my website!";
elm.href = "https://rfoel.com";
toast({
message: elm,
type: "is-warning",
position: "center",
closeOnClick: true,
pauseOnHover: true,
animate: { in: "fadeIn", out: "fadeOut" }
});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