Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
103 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const toastTrigger = document.getElementById("liveToastBtn") | ||
| const toastLiveExample = document.getElementById("liveToast") | ||
| if (toastTrigger) { | ||
| toastTrigger.addEventListener("click", () => { | ||
| const toast = new bootstrap.Toast(toastLiveExample) | ||
|
|
||
| toast.show() | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| {% set title = 'Toast' %} | ||
| {% set filename = 'component-toasts.html' %} | ||
|
|
||
| {% extends 'layouts/master.html' %} | ||
| {% block content %} | ||
| <div class="page-heading"> | ||
| <div class="page-title"> | ||
| <div class="row"> | ||
| <div class="col-12 col-md-6 order-md-1 order-last"> | ||
| <h3>Toast</h3> | ||
| <p class="text-subtitle text-muted">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p> | ||
| </div> | ||
| <div class="col-12 col-md-6 order-md-2 order-first"> | ||
| <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end"> | ||
| <ol class="breadcrumb"> | ||
| <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li> | ||
| <li class="breadcrumb-item active" aria-current="page">Toasts</li> | ||
| </ol> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <section class="section"> | ||
| <div class="row"> | ||
| <div class="col-md-6 col-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h5>Basic Toasts</h5> | ||
| </div> | ||
| <div class="card-body"> | ||
| <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> | ||
| <div class="toast-header"> | ||
| <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg> | ||
| <strong class="me-auto">Bootstrap</strong> | ||
| <small>11 mins ago</small> | ||
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | ||
| </div> | ||
| <div class="toast-body"> | ||
| Hello, world! This is a toast message. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="col-md-6 col-12"> | ||
| <div class="card"> | ||
| <div class="card-header"> | ||
| <h5>Open Toast Buttons</h5> | ||
| </div> | ||
| <div class="card-body"> | ||
| <p>Click the button to show toasts.</p> | ||
| <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> | ||
| <div class="toast-container position-fixed bottom-0 end-0 p-3"> | ||
| <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true"> | ||
| <div class="toast-header"> | ||
| <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg> | ||
| <strong class="me-auto">Bootstrap</strong> | ||
| <small>11 mins ago</small> | ||
| <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> | ||
| </div> | ||
| <div class="toast-body"> | ||
| Hello, world! This is a toast message. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| {% endblock %} | ||
| {% block js %} | ||
| <script src="assets/js/pages/component-toasts.js"></script> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters