dtoaster

DToaster

- Basic and viable toasts with progressbar and high customizabillity

DEMO

Requisites

VueJS >= 2.x

Install

$ npm i dtoaster

Usage

You can import and use the module everywhere in your app using:

app.js:

import 'dtoaster/dist/dtoaster.css'
import DToaster from 'dtoaster'
import ToasterPresets from './json/toast_presets.json' //Your predefined toasts presets (optionally)

Vue.use(DToaster, {
  presets: ToasterPresets,
  position: 'top-right', //toasts container position on the screen
  containerOffset: '45px', //toasts container offset from top/bottom of the screen
})

anycomponent.vue:

this.$dtoast.pop({
  preset: "your_preset",
  heading: `Custom Heading`,
  content:  `Custom content`,
  {...}
})

Predefined toasts (presets)

You can create a json file with array of objects which are predefined toasts with all your options you want. Every preset must be associated with a name, which is used in loading the particular preset in a toast

Example of a json file:

[
    {
        "name" : "success",
        "icon" : "mdi mdi-checkbox-multiple-marked-circle-outline",
        "icon_size" : "32px",
        "duration" : "2500",
        "background" : "rgba(32,105,156,.9)",
        "height" : "75px",
        "color" : "#FFFFFF",
        "show_progress_timeout" : "true",
        "progress_background" : "#5a9fdc",
        "progress_thumb_bg" : "rgba(32,105,156,.9)"
    },

    {
        "name" : "error",
        "icon" : "mdi mdi-close-circle-outline",
        "icon_size" : "32px",
        "duration" : "2500",
        "background" : "#ff1e1e",
        "height" : "75px",
        "color" : "#FFFFFF",
        "show_progress_timeout" : "true",
        "progress_background" : "rgb(255 175 175)",
        "progress_thumb_bg" : "#ff1e1e"
    }
]

You can then use a specific preset by providing its name when 'popping' a toast:

  this.$dtoast.pop({
    preset: "success",
    {...}
  })

This will create a toast with the options from your desired preset, which eliminate the need of re-typing every option every time you pop the same toast

You can override specific preset option for a toast, leaving others unchanged

  this.$dtoast.pop({
    preset: "success",
    color: "red",
    heading: "Toast with a different heading",
    content: "Toast with a different content",
    {...}
  })

Toast Options

Option	Type	Function	Default	Available
toastVerticalOffset	String	Vertical offset of each toast	5px	null, --
position	String	Position of the toast container	top-right	top-right, top-left, bottom-right, bottom-left
width	String	Toast's width	300px	--
height	String	Toast's height	75px	--
name	String	Used preset name	--	null, --
heading	String	Toast's heading	--	--
content	String	Toast's content	--	--
icon	String	Toast's icon class	--	--
icon_size	String	Toast's icon font-size	23px	--
transition	String	Toast's transitioning	slide	slide, more to come
duration	String	Toast's duration	1000	--
background	String	Toast's background color	black	--
color	String	Toast's font color	white	--
show_progress_timeout	String	Show the progressbar	true	--
progress_background	String	Progressbar's background color	tomato	--
progress_thumb_bg	String	Progressbar's thumb color	red	--
_style	String	Any style to override on the toast	--	{prop: value, ...}

Container Options

Option	Type	Function	Default	Available
containerVerticalOffset	String	Vertical offset of the container	35px	null, --
containerSideOffset	String	Side offset of the container	5px	null, --

If you feel the need to thank me

BTC - bc1q8zhwxa5l6zg3amxten5rmetdkrz4sp78qzl5c4

ETH - 0x5e251964ACD0765694Bff190D88a6a727D986912