1.0.11 • Published 10 months ago

j-toastify v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Vue Toastification (for Vue 3.x)

Here is a beautiful and light toastification for Vue 3.x .

Installation

npm install j-toastify

Usage

  1. Base Usage: base usage will auto close and display on the top-right corner of the screen
import { JToastify } from 'j-toastify'

JToastify.alert({
    message: "Here is a notification.",
}, () => {
    // Here is the callback function that will be called if needed
})
  1. Full Config Usage
import { JToastify } from 'j-toastify'

JToastify.alert({
    position: "center",      // ["top-right", "top-left", "top", "center", "bottom-left", "bottom-right", "bottom"]
    icon: true,              // Booleans: Show the icon before message or not.
    message: "Hello! I love coding.", //  The message you wanna show and only String type allowed.
    type: "primary",         // ['primary', 'success', 'warning', 'danger'] 
    autoClose: true,         // The notification will be automatically closed
    timeout: 5000,           // The auto close timeout, default is 5000
    confirmText: "Confirm",  // The confirm Button Text
    cancelText: "Cancel",    // The cancel Button Text
    confirmEvent: () => { }, // The confirm button Event
    cancelEvent: () => { },  // The cancel button Event
    closeEvent: () => { }    // The close icon event
}, () => {
    // Here is the callback function that will be called if needed
})

APIs

KeyTypeRequiredDefaultSelectionsDescription
messageStringtrue--------The message will show
positionStringfalse"top-right""top-right", "top-left", "top", "center", "bottom-left", "bottom-right", "bottom"The place where the component will show
iconBooleanfalsetrue----The icon before message
typeStringfalse"primary""primary", "success", "warning", "danger"Different type means different color
autoCloseBooleanfalsetrue----When true, the component will be auto closed after timeout value
timeoutNumberfalse5000----When autoClose is true, it is the display time
confirmTextStringfalse--------The autoClose key need be false, and if confirmText has value, the confirm button will be shown
cancelTextStringfalse--------The autoClose key need be false, and if cancelText has value, the cancel button will be shown
confirmEventFunctionfalse--------When the confirm button is clicked, the confirmEvent function will be called
cancelEventFunctionfalse--------When the cancel button is clicked, the cancelEvent function will be called
closeEventFunctionfalse--------When the close icon is clicked, the closeEvent function will be called

Features

Demo

Check Demo Go to Demo

1.0.11

10 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago