Simple Toast-like Prompt Popup – TaTa.js

Category: Javascript , Notification | December 20, 2019
Author:xrr2016
Views Total:11,356 views
Official Page:Go to website
Last Update:December 20, 2019
License:MIT

Preview:

Simple Toast-like Prompt Popup – TaTa.js

Description:

TaTa.js is an easy-to-use JavaScript plugin for showing toast-like notification popups on your web app.

Key features:

  • 6 notification types: text, log, info, success, warning, error.
  • 9 position values.
  • Displays a progress bar to indicate the remained time.
  • Fade or slide animations.
  • onClick & onClose callbacks.

How to use it:

1. Install & import the TaTa.js library into the document.

# Yarn
$ yarn add tata-js
# NPM
$ npm install tata-js --save
import tata from 'tata-js'
<!-- OR -->
<script src="dist/tata.js"></script>

2.  The JavaScript syntax to create toast messages on the screen.

tata.text('Hello World', 'CSSScript.Com')
tata.log('Hello World', 'CSSScript.Com')
tata.info('Hello World', 'CSSScript.Com')
tata.success('Hello World', 'CSSScript.Com')
tata.warning('Hello World', 'CSSScript.Com')
tata.error('Hello World', 'CSSScript.Com')

3. Set the position of the toast message. Default: tr (top right).

  • tr: top right
  • tm: top middle
  • tl: top left
  • mr: middle right
  • mm: middle middle
  • ml: middle left
  • bl: bottom left
  • bm: bottom middle
  • br: bottom right
tata.text('Hello World', 'CSSScript.Com', {
  position: 'tm'
})

4. Specify the duration of the toast message. By default the toast message will auto dismiss after 3 seconds.

tata.text('Hello World', 'CSSScript.Com', {
  duration: 5000
})

5. Make the toast message always be visible.

tata.text('Hello World', 'CSSScript.Com', {
  holding: true
})

6. Show a close button inside the toast message. Default: true.

tata.text('Hello World', 'CSSScript.Com', {
  closeBtn: false
})

7. Show a progress bar inside the toast message. Default: true.

tata.text('Hello World', 'CSSScript.Com', {
  progress: false
})

8. Change the animation of the toast message. Default: ‘fade’.

tata.text('Hello World', 'CSSScript.Com', {
  animate: 'slide'
})

9. Callback functions.

tata.text('Hello World', 'CSSScript.Com', {
  onClick: null,
  onClose: null
})

You Might Be Interested In:


Leave a Reply