Advanced Toast Message Library Based On Bootstrap 5 – Toaststrap

Toaststrap is an advanced customizable toast message library based on Bootstrap 5 styles.

Features:

• Without Bootstrap 5 JS.
• 7 notification types.
• 4 position options.
• Custom avatar.
• Plays a sound effect if needed.
• Shows a progress bar indicating the time left.
• Dismissable or not.
• Pausable or not.
• RTL support.

How to use it:

1. Load the necessary Bootstrap 5’s stylesheet in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

2. Load the Toaststrap’s JavaScript and CSS files.

<link rel="stylesheet" href="toaststrap.css" />
<script src="toaststrap.js"></script>

3. Create a new instance of the Toaststrap.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
})

4. Show the toast message.

myToast.show();

5. Set the position of the toast message.

• TOP_START
• TOP_END (Default)
• BOTTOM_START
• BOTTOM_END

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      position: window.toaststrap_position.TOP_START,
})

6. Specify the notification type.

• DEFAULT
• PRIMARY
• INFO
• WARNING
• DANGER
• DARK
• SWEET

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      type: window.toaststrap_type.DEFAULT,
})

7. Add an avatar to the toast message.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      avatar: '/path/to/avatar.svg', 
})

8. Determine whether to play a sound effect.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      soundable: true,
      soundSource: '/path/to/ring.mp3',
})

9. More configuration options.

const myToast =  toaststrap({
      title: 'Toast Title',
      text: 'Toast Message',
      // show/hide toast header
      noHeader: false,
      // is dismissable?
      dismissible: false,
      // is pausable?
      pausable: true,
      // shows progress bar
      progress: true,
      // Parent node
      parent: 'body',
      // Show date
      datetime: '2012-01-01T00:00',
      // Duration in ms
      duration: 5,
      // Space between toast messages
      space: 5,
})

The post Advanced Toast Message Library Based On Bootstrap 5 – Toaststrap appeared first on CSS Script.