$('button').on('click', function(){ app.toast('A basic toast using Javascript. It stays for 4 seconds.');});
$('button').on('click', function(){ app.toast('This toast stays for 7 seconds.', { duration: 7000 });});
$('button').on('click', function(){ app.toast('Including an action button with link.', { actionTitle: 'Retry', actionUrl: 'something' });});
$('button').on('click', function(){ app.toast('Including a danger action button', { actionTitle: 'Retry', actionUrl: 'something', actionColor: 'danger' });});
$('button').on('click', function(){ app.toast('Including a success action button', { actionTitle: 'Retry', actionUrl: 'something', actionColor: 'success' });});
<button class="btn btn-primary" data-provide="toast" data-text="This content is from data attribute." data-action-title="Retry" data-action-color="purple">Basic data-attribute</button>
Documentation
Usage
Trigger the toast via JavaScript:
app.toast(text, options)
Trigger the toast via data-attribute when user click on the element:
<button data-provide="toast" data-text="Sample text." data-duration="3000">Toast it</button>
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-duration="4000"
or data-action-title="Undo"
.
Name | Type | Default | Description |
---|---|---|---|
duration
|
Number | 4000 | How long the toast should be visible (ms). |
actionTitle
|
String | null | The text for action button. |
actionUrl
|
String | null | The link for action button. |
actionColor
|
String | 'warning' |
The color of action button. It could be any string that can attach to .text-* utility class.
|