Notie.js Javascript Alert Toast Notification Library Full Tutorial with Examples

Notie.js Javascript Alert Toast Notification Library Full Tutorial with Examples

 

 

 

Get Started

 

 

In order to get started we need to include the notie.js cdnn or install it as a npm dependency

 

 

Install

 

cdn

 

 

<head>
  ...
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
  <style>
    /* override styles here */
    .notie-container {
      box-shadow: none;
    }
  </style>
</head>
<body>
  ...
  <!-- Bottom of body -->
  <script src="https://unpkg.com/notie"></script>
</body>

 

 

 

NPM

 

 

npm i notie

In ES6 the syntax will be

 

import notie from 'notie'
// or
import { alert, force, confirm, input, select, date, setOptions, hideAlerts } from 'notie'

 

 

In browser the syntax will be

 

notie
// or
window.notie

 

 

 

Notie Alert

 

 

notie.alert({
  type: Number|String, // optional, default = 4, enum: [1, 2, 3, 4, 5, 'success', 'warning', 'error', 'info', 'neutral']
  text: String,
  stay: Boolean, // optional, default = false
  time: Number, // optional, default = 3, minimum = 1,
  position: String // optional, default = 'top', enum: ['top', 'bottom']
})

 

 

 

 

 

 

See also  Build a QRCode.js Plain Text Dynamic QRCode Generator in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

Notie Confirm

 

 

 

notie.confirm({
  text: String,
  submitText: String, // optional, default = 'Yes'
  cancelText: String, // optional, default = 'Cancel'
  position: String, // optional, default = 'top', enum: ['top', 'bottom']
  submitCallback: Function, // optional
  cancelCallback: Function // optional
}, submitCallbackOptional(), cancelCallbackOptional())

 

 

 

 

 

 

 

Notie Input

 

 

 

notie.input({
  text: String,
  submitText: String, // optional, default = 'Submit'
  cancelText: String, // optional, default = 'Cancel'
  position: String, // optional, default = 'top', enum: ['top', 'bottom']
  submitCallback: Function(value), // optional
  cancelCallback: Function(value), // optional
  autocapitalize: 'words', // default: 'none'
  autocomplete: 'on', // default: 'off'
  autocorrect: 'off', // default: 'off'
  autofocus: 'true', // default: 'true'
  inputmode: 'latin', // default: 'verbatim'
  max: '10000',// default: ''
  maxlength: '10', // default: ''
  min: '5', // default: ''
  minlength: '1', // default: ''
  placeholder: 'Jane Smith', // default: ''
  value: String, // default: ''
  spellcheck: 'false', // default: 'default'
  step: '5', // default: 'any'
  type: 'text', // default: 'text'
  allowed: ['an', 's'] // Default: null, 'an' = alphanumeric, 'a' = alpha, 'n' = numeric, 's' = spaces allowed. Can be custom RegExp, ex. allowed: new RegExp('[^0-9]', 'g')
}, submitCallbackOptional(value), cancelCallbackOptional(value))

 

See also  Complete Node.js Express MongoDB CRUD Project with Validation

 

 

 

 

 

 

 

Notie Select Dialog

 

 

 

 

notie.select({
  text: String,
  cancelText: String, // optional, default = 'Cancel'
  position: String, // optional, default = 'bottom', enum: ['top', 'bottom']
  choices: [
    {
      type: Number|String, // optional, default = 1
      text: String,
      handler: Function
    }
    ...
  ],
  cancelCallback: Function // optional
}, cancelCallbackOptional())

 

 

 

 

 

 

 

 

Notie Date Dialog

 

 

 

 

notie.date({
  value: Date,
  submitText: String, // optional, default = 'OK'
  cancelText: String, // optional, default = 'Cancel'
  position: String, // optional, default = 'top', enum: ['top', 'bottom']
  submitCallback: Function(date), // optional
  cancelCallback: Function(date) // optional
}, submitCallbackOptional(date), cancelCallbackOptional(date))

 

 

 

 

 

 

 

Leave a Reply