Breadstick is a brand new Vue.js notification component to render flexible, customizable toast messages on the web app.
See Also:
How to use it:
1. Install and register the Vue Breadstick component.
import Vue from 'vue' import Breadstick from 'breadstick' Vue.use(Breadstick)
// or const breadstick = new Breadstick()
2. Create a basic toast message using the notify
method.
this.$breadstick.notify('Toast Message Here');
3. It also works with JSX and Vue.js render function.
import Alert from './components/Alert' export default { name: 'app', mounted () { const showAlert = () => alert('Hello!') breadstick.notify(({ onClose }) => { return ( An JSX Alert notification ) } }
import Alert from './components/Alert' export default { name: 'app', mounted () { this.$breadstick.notify(({ h, onClose }) => { return h(Alert, { on: { click: onClose } }, 'A render function Alert notification') }) } }
4. Change the position of the toast message. Available positions: ‘top’, ‘bottom’, ‘top-left’, ‘top-right’, ‘bottom-left’, ‘bottom-right’.
const breadstick = new Breadstick({ position: 'bottom' })
5. Change the time to wait before auto dismissing the toast message. Default: 5000ms.
const breadstick = new Breadstick({ duration: 6000 })
Preview:
Changelog:
05/20/2020
- Update
Download Details:
Author: codebender828
Live Demo: https://breadstick.netlify.com/
Download Link: https://github.com/codebender828/breadstick/archive/master.zip
Official Website: https://github.com/codebender828/breadstick
Install & Download:
# Yarn
$ yarn add breadstick
# NPM
$ npm install breadstick --save
thanks for featuring this!