2016-08-04 19:42:10 +03:00
|
|
|
---
|
|
|
|
|
layout: docs
|
|
|
|
|
title: Snackbars
|
|
|
|
|
group: material-design
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Snackbars and toasts can be created using the [SnackbarJS](https://github.com/FezVrasta/snackbarjs) plugin developed by us.
|
|
|
|
|
|
|
|
|
|
## Contents
|
|
|
|
|
|
|
|
|
|
* Will be replaced with the ToC, excluding the "Contents" header
|
|
|
|
|
{:toc}
|
|
|
|
|
|
|
|
|
|
## Include in the page
|
|
|
|
|
|
2017-08-11 17:59:31 +03:00
|
|
|
In order to make snackbars work, make sure to include `snackbar.min.js` before `bootstrap-material-design.min.js`.
|
2016-08-04 19:42:10 +03:00
|
|
|
|
|
|
|
|
{% highlight html %}
|
2017-12-10 19:57:27 +03:00
|
|
|
<script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
|
|
|
|
|
<script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
|
|
|
|
|
|
|
|
|
|
<!-- SnackbarJS plugin -->
|
|
|
|
|
<script src="{{ site.cdn.snackbar }}"></script>
|
|
|
|
|
|
|
|
|
|
<script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
|
2016-08-04 19:42:10 +03:00
|
|
|
<script>
|
|
|
|
|
$('body').bootstrapMaterialDesign();
|
|
|
|
|
</script>
|
|
|
|
|
{% endhighlight %}
|
|
|
|
|
|
2016-08-04 20:02:08 +03:00
|
|
|
{% callout info %}
|
2017-03-22 16:10:37 +03:00
|
|
|
**Heads up!** You don't need to include SnackbarJS CSS, it's already bundled in Material Design for Bootstrap.
|
2016-08-04 20:02:08 +03:00
|
|
|
{% endcallout %}
|
2016-08-04 19:42:10 +03:00
|
|
|
|
|
|
|
|
## Examples
|
|
|
|
|
|
|
|
|
|
Click on the buttons below to spawn snackbars and toasts:
|
|
|
|
|
|
|
|
|
|
### Snackbar
|
|
|
|
|
|
|
|
|
|
{% example html %}
|
|
|
|
|
<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-content="Free fried chicken here! <a href='https://example.org' class='btn btn-info'>Check it out</a>" data-html-allowed="true" data-timeout="0">
|
|
|
|
|
Snackbar
|
|
|
|
|
</button>
|
|
|
|
|
{% endexample %}
|
|
|
|
|
|
|
|
|
|
### Toast
|
|
|
|
|
|
|
|
|
|
{% example html %}
|
|
|
|
|
<button type="button" class="btn btn-secondary" data-toggle="snackbar" data-style="toast" data-content="Fried chicken out of stock.">
|
|
|
|
|
Toast
|
|
|
|
|
</button>
|
|
|
|
|
{% endexample %}
|
|
|
|
|
|
|
|
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
The complete documentation of SnackbarJS is available visiting [its official GitHub repository](https://github.com/FezVrasta/snackbarjs).
|
