Configuration

SnotifyToastConfig - changes toasts configuration.
SnotifyGlobalConfig - changes toast dock configuration.

Setting default configuration

Default configuration looks like this - toastDefaults
Of course you can use it like json, just omit imports, and replace SnotifyStyle & SnotifyPosition with string values. Just be sure that you are follow SnotifyDefaults interface.

Example
import Snotify from 'vue-snotify';


Vue.use(Snotify, {
  toast: {
    timeout: 2000
  }
})

If you want to change default config in runtime you can use vm.$snotify.setDefaults() method

SnotifyToastConfig

id

  • type: number|string
  • default: <Automatically generated value>

    Toast identity

timeout

  • type: number
  • default: 2000

    Toast timeout in milliseconds. 0 - Disable timeout

showProgressBar

  • type: boolean
  • default: true

    Enable/Disable progress bar. Disabled by default if timeout is 0.

type

  • type: SnotifyType

    Depends on toast type - success | async | error | etc... Actually it changes only toast class name

closeOnClick

  • type: boolean
  • default: true

    Enable/Disable close action by clicking on toast

pauseOnHover

  • type: boolean
  • default: true

    Enable/Disable pause on hover action

buttons

  • type: SnotifyButton[]
  • default:
      [
        {text: 'Ok', action: null, bold: true},
        {text: 'Cancel', action: null, bold: false},
      ]
    

    Buttons config for Confirmation & Prompt types You can pass, unlimited number of buttons. Just be sure you can handle it)

placeholder

  • type: string
  • default: "Enter answer here..."

    Placeholder for Prompt toast

titleMaxLength

  • type: number
  • default: 16

    Toast title maximum length

bodyMaxLength

  • type: number
  • default: 150

    Toast body maximum length

icon

  • type: string
  • default: undefined

    Disable icon - false; Custom icon url.

      const icon = `https://placehold.it/48x100`;
      vm.$snotify.simple('Example body', {
        icon: icon // false - disable
      });
    

backdrop

  • type: number
  • default: -1

    Backdrop opacity in range from 0.0 to 1.0. Disabled -1

animation

  • type: SnotifyAnimate
  • default: {enter: 'fadeIn', exit: 'fadeOut', time: 400} ```

    Animation configuration object. Time in milliseconds

html

  • type: string
  • default: null

    Toast inner html. When set, overrides toast content.

position

SnotifyGlobalConfig

maxOnScreen

  • type: number
  • default: 8

    Max toast items on screen.
    For example you want to display 3 toasts max at the time. But for some purposes your system calls it 10 times.
    With this option, 8 toast will be shown. And after each of it will disappear, new toast from the queue will be shown.

maxAtPosition

  • type: number
  • default: 8

    Max toast items at position.
    Same as maxOnScreen but affects only current toast position block.

newOnTop

  • type: boolean
  • default: true

    Should new items come from top or bottom side.
    This option created for styling purposes.
    For example, if your toast position is TOP-RIGHT. It's not very nice, when items comes from top and pulls down all other toasts

oneAtTime

  • type: boolean
  • default: false

    Only one toast in the queue

preventDuplicates

  • type: boolean
  • default: false

    Only one toast type in the queue

results matching ""

    No results matching ""