BS5 components

src/html/components/_scripts.astro

@@ -60,8 +60,10 @@ const adminlteJsUrl = path + "/js/adminlte.js";
 <!--end::Bootstrap Tooltips-->
 <!--begin::JavaScript-->
 <script is:inline>
-  const toastTrigger = document.getElementById('liveToastBtn');
+  // const toastTrigger = document.getElementById('liveToastBtn');
-  const toastLiveExample = document.getElementById('liveToast');
+  // const toastLiveExample = document.getElementById('liveToast');
+  const toastTrigger = document.querySelector('[data-lte-show-toast="toastPrimary"]');
+  const toastLiveExample = document.getElementById('toastPrimary');
   if (toastTrigger) {
     const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
     toastTrigger.addEventListener('click', () => {

src/html/pages/components/general.astro

@@ -612,20 +612,9 @@ const pageTitle = "General Components";
               <!--end::Header-->
               <!--begin::Body-->
               <div class="card-body">
-                <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
+                <button type="button" class="btn btn-primary" data-lte-trigger="showToastPrimary">Show live toast</button>
                 <div class="toast-container position-fixed bottom-0 end-0 p-3">
-                  <div id="liveToast" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
+                  <div id="toastPrimary" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true">
-                    <div class="toast-header">
-                      <i class="bi bi-circle me-2"></i>
-                      <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 id="liveToast" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">
                     <div class="toast-header">
                       <i class="bi bi-circle me-2"></i>
                       <strong class="me-auto">Bootstrap</strong>
@@ -636,6 +625,18 @@ const pageTitle = "General Components";
                       Hello, world! This is a toast message.
                     </div>
                   </div>
+                  <!--<button type="button" class="btn btn-warning" data-lte-showtoast="toastWarning">Show live toast</button>-->
+                  <!--<div data-lte-toast="toastWarning" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">-->
+                  <!--  <div class="toast-header">-->
+                  <!--    <i class="bi bi-circle me-2"></i>-->
+                  <!--    <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>
               <!--end::Body-->