Snackbars

<!-- Snackbar -->
<div class="snackbar" id="default-snackbar">This is a Snackbar.</div>

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar">Show Snackbar</button>

<script>
document.querySelector('#show-snackbar').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#default-snackbar'));
});
</script>

<!-- Snackbar -->
<div class="snackbar snackbar-start" id="snackbar-start-example">This is a Snackbar</div>

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-start">Show snackbar to the Start</button>

<script>
document.querySelector('#show-snackbar-start').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-start-example'));
});
</script>

<!-- Snackbar -->
<div class="snackbar snackbar-end" id="snackbar-end-example">This is a Snackbar</div>

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-end">Show snackbar to the End</button>

<script>
document.querySelector('#show-snackbar-end').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-end-example'));
});
</script>
        

<!-- Snackbar -->
<div class="snackbar" id="snackbar-5000">This is a Snackbar with visible duration of 5000ms.</div>

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-5000">Show Snackbar for 5000ms</button>

<script>
document.querySelector('#show-snackbar-5000').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-5000'), {
    'visibleDuration': 5000
  });
});
</script>

<!-- Snackbar -->
<div class="snackbar" id="snackbar-close">
  Close this snackbar
  <button type="button" class="btn btn-outline-yellow border-0 ms-2" data-bs-dismiss="snackbar">
    Dismiss
  </button>
</div>

<!-- Button to trigger a Snackbar -->
<button type="button" class="btn btn-indigo" id="show-snackbar-dismissible">Dismissible snackbar</button>

<script>
document.querySelector('#show-snackbar-dismissible').addEventListener('click', function () {
  new materialstyle.Snackbar(document.querySelector('#snackbar-close'), {
    'autoClose': false
  });
});
</script>