github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

BS5 components

pull/5312/head
LEWE, GEORGE 2023-08-31 10:48:41 +02:00
parent e164129a4c
commit 995e143c2d
3 changed files with 137 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/html/components/_scripts.astro
View File

@ -58,17 +58,16 @@ const adminlteJsUrl = path + "/js/adminlte.js";
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>
<!--end::Bootstrap Tooltips-->
<!--begin::JavaScript-->
<!--begin::Bootstrap Toasts-->
<script is:inline>
// const toastTrigger = document.getElementById('liveToastBtn');
// 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', () => {
const toastTriggerList = document.querySelectorAll('[data-bs-toggle="toast"]')
toastTriggerList.forEach(btn => {
btn.addEventListener('click', event => {
event.preventDefault();
const toastEle = document.getElementById(btn.getAttribute('data-bs-target'));
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
toastBootstrap.show();
})
}
})
</script>
<!--end::JavaScript-->
<!--end::Bootstrap Toasts-->

169
src/html/pages/components/general.astro
View File

@ -225,31 +225,31 @@ const pageTitle = "General Components";
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<button type="button" class="btn btn-primary mb-2">Primary</button>
<button type="button" class="btn btn-secondary mb-2">Secondary</button>
<button type="button" class="btn btn-success mb-2">Success</button>
<button type="button" class="btn btn-danger mb-2">Danger</button>
<button type="button" class="btn btn-warning mb-2">Warning</button>
<button type="button" class="btn btn-info mb-2">Info</button>
<button type="button" class="btn btn-light mb-2">Light</button>
<button type="button" class="btn btn-dark mb-2">Dark</button>
<button type="button" class="btn btn-link mb-2">Link</button>
<hr>
<button type="button" class="btn btn-primary" disabled>Primary (disabled)</button>
<button type="button" class="btn btn-secondary" disabled>Secondary (disabled)</button>
<button type="button" class="btn btn-success" disabled>Success (disabled)</button>
<button type="button" class="btn btn-danger" disabled>Danger (disabled)</button>
<button type="button" class="btn btn-warning" disabled>Warning (disabled)</button>
<button type="button" class="btn btn-info" disabled>Info (disabled)</button>
<button type="button" class="btn btn-primary mb-2" disabled>Primary (disabled)</button>
<button type="button" class="btn btn-secondary mb-2" disabled>Secondary (disabled)</button>
<button type="button" class="btn btn-success mb-2" disabled>Success (disabled)</button>
<button type="button" class="btn btn-danger mb-2" disabled>Danger (disabled)</button>
<button type="button" class="btn btn-warning mb-2" disabled>Warning (disabled)</button>
<button type="button" class="btn btn-info mb-2" disabled>Info (disabled)</button>
<hr>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-primary mb-2">Primary</button>
<button type="button" class="btn btn-outline-secondary mb-2">Secondary</button>
<button type="button" class="btn btn-outline-success mb-2">Success</button>
<button type="button" class="btn btn-outline-danger mb-2">Danger</button>
<button type="button" class="btn btn-outline-warning mb-2">Warning</button>
<button type="button" class="btn btn-outline-info mb-2">Info</button>
<button type="button" class="btn btn-outline-light mb-2">Light</button>
<button type="button" class="btn btn-outline-dark mb-2">Dark</button>
<hr>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-warning btn-sm">Small button</button>
@ -271,23 +271,23 @@ const pageTitle = "General Components";
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<div class="btn-group" role="group" aria-label="Basic example">
<div class="btn-group mb-2" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<div class="btn-group mb-2" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic outlined example">
<div class="btn-group mb-2" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<hr>
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<div class="btn-group mb-2" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
@ -297,7 +297,7 @@ const pageTitle = "General Components";
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="btn-group mb-2" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
@ -308,7 +308,7 @@ const pageTitle = "General Components";
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
<hr>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group mb-2" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
@ -612,8 +612,28 @@ const pageTitle = "General Components";
<!--end::Header-->
<!--begin::Body-->
<div class="card-body">
<button type="button" class="btn btn-primary" data-lte-trigger="showToastPrimary">Show live toast</button>
<button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastDefault">Show default toast</button>
<hr>
<button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastPrimary">Show primary toast</button>
<button type="button" class="btn btn-secondary mb-2" data-bs-toggle="toast" data-bs-target="toastSecondary">Show secondary toast</button>
<button type="button" class="btn btn-success mb-2" data-bs-toggle="toast" data-bs-target="toastSuccess">Show success toast</button>
<button type="button" class="btn btn-danger mb-2" data-bs-toggle="toast" data-bs-target="toastDanger">Show danger toast</button>
<button type="button" class="btn btn-warning mb-2" data-bs-toggle="toast" data-bs-target="toastWarning">Show warning toast</button>
<button type="button" class="btn btn-info mb-2" data-bs-toggle="toast" data-bs-target="toastInfo">Show info toast</button>
<button type="button" class="btn btn-light mb-2" data-bs-toggle="toast" data-bs-target="toastLight">Show light toast</button>
<button type="button" class="btn btn-dark mb-2" data-bs-toggle="toast" data-bs-target="toastDark">Show dark toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="toastDefault" class="toast" 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="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>
@ -625,18 +645,83 @@ 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 id="toastSecondary" class="toast toast-secondary" 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="toastSuccess" class="toast toast-success" 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="toastDanger" class="toast toast-danger" 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="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 id="toastInfo" class="toast toast-info" 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="toastLight" class="toast toast-light" 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="toastDark" class="toast toast-dark" 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-->

4
src/scss/_toasts.scss
View File

@ -1,5 +1,5 @@
/**
* Toast styles to reflect Bootstrap colors
* Custom toast styles to reflect Bootstrap colors
*/
.toast {
min-width: 300px;
@ -15,7 +15,6 @@
}
.toast-danger .toast-header {
//background-color: #dc3545 !important;
color: $white !important;
background-color: $red !important;
border-color: $red;
@ -141,4 +140,3 @@
color: #1f2d3d;
background-color: #ffce3a;
}