DToaster

– Basic and viable toasts with progressbar and high customizabillity

DEMO

Alt Text
Alt Text

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 milliseconds
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

GitHub

https://github.com/ddaniel987/dtoaster