Toasts

Description

This widget allows to close toast by click on the button and show notification by .info(), .error() etc methods

Simple alert

To create toast widget just paste following code as is

<div class="toast toast-primary" data-toast>
    <button class="btn btn-clear float-right"></button>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Result

Show notifications

If you want to show notification you may use the following code example in your JS file

Spectre.Toast.info('Content of the toast');
Spectre.Toast.info('Content of the toast', 'Toast title');

Also, you may use custom types of notification

Spectre.Toast.error('Some error')
Spectre.Toast.success('All <em>is</em> fine')
Spectre.Toast.warning('Warning content')

Configuration

All toasts supports custom parameters in methods and you can change the following values

Spectre.Toast.show({
    title: 'Test toast',
    message: 'Simple toast text message',
    type: 'primary',
    timeout: 3000,
    autoClose: true,
});

// or

Spectre.Toast.error(
    'Error message',
    'Error title',
    {autoClose: false}
);