mirror of https://github.com/ColorlibHQ/AdminLTE
BS5 components
LEWE, GEORGE
parent
e164129a4c
commit
995e143c2d
|
|
@ -58,17 +58,16 @@ const adminlteJsUrl = path + "/js/adminlte.js";
|
||||||
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
|
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
|
||||||
</script>
|
</script>
|
||||||
<!--end::Bootstrap Tooltips-->
|
<!--end::Bootstrap Tooltips-->
|
||||||
<!--begin::JavaScript-->
|
<!--begin::Bootstrap Toasts-->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// const toastTrigger = document.getElementById('liveToastBtn');
|
const toastTriggerList = document.querySelectorAll('[data-bs-toggle="toast"]')
|
||||||
// const toastLiveExample = document.getElementById('liveToast');
|
toastTriggerList.forEach(btn => {
|
||||||
const toastTrigger = document.querySelector('[data-lte-show-toast="toastPrimary"]');
|
btn.addEventListener('click', event => {
|
||||||
const toastLiveExample = document.getElementById('toastPrimary');
|
event.preventDefault();
|
||||||
if (toastTrigger) {
|
const toastEle = document.getElementById(btn.getAttribute('data-bs-target'));
|
||||||
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
|
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
|
||||||
toastTrigger.addEventListener('click', () => {
|
|
||||||
toastBootstrap.show();
|
toastBootstrap.show();
|
||||||
})
|
})
|
||||||
}
|
})
|
||||||
</script>
|
</script>
|
||||||
<!--end::JavaScript-->
|
<!--end::Bootstrap Toasts-->
|
||||||
|
|
|
||||||
|
|
@ -225,31 +225,31 @@ const pageTitle = "General Components";
|
||||||
<!--end::Header-->
|
<!--end::Header-->
|
||||||
<!--begin::Body-->
|
<!--begin::Body-->
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<button type="button" class="btn btn-primary">Primary</button>
|
<button type="button" class="btn btn-primary mb-2">Primary</button>
|
||||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
<button type="button" class="btn btn-secondary mb-2">Secondary</button>
|
||||||
<button type="button" class="btn btn-success">Success</button>
|
<button type="button" class="btn btn-success mb-2">Success</button>
|
||||||
<button type="button" class="btn btn-danger">Danger</button>
|
<button type="button" class="btn btn-danger mb-2">Danger</button>
|
||||||
<button type="button" class="btn btn-warning">Warning</button>
|
<button type="button" class="btn btn-warning mb-2">Warning</button>
|
||||||
<button type="button" class="btn btn-info">Info</button>
|
<button type="button" class="btn btn-info mb-2">Info</button>
|
||||||
<button type="button" class="btn btn-light">Light</button>
|
<button type="button" class="btn btn-light mb-2">Light</button>
|
||||||
<button type="button" class="btn btn-dark">Dark</button>
|
<button type="button" class="btn btn-dark mb-2">Dark</button>
|
||||||
<button type="button" class="btn btn-link">Link</button>
|
<button type="button" class="btn btn-link mb-2">Link</button>
|
||||||
<hr>
|
<hr>
|
||||||
<button type="button" class="btn btn-primary" disabled>Primary (disabled)</button>
|
<button type="button" class="btn btn-primary mb-2" disabled>Primary (disabled)</button>
|
||||||
<button type="button" class="btn btn-secondary" disabled>Secondary (disabled)</button>
|
<button type="button" class="btn btn-secondary mb-2" disabled>Secondary (disabled)</button>
|
||||||
<button type="button" class="btn btn-success" disabled>Success (disabled)</button>
|
<button type="button" class="btn btn-success mb-2" disabled>Success (disabled)</button>
|
||||||
<button type="button" class="btn btn-danger" disabled>Danger (disabled)</button>
|
<button type="button" class="btn btn-danger mb-2" disabled>Danger (disabled)</button>
|
||||||
<button type="button" class="btn btn-warning" disabled>Warning (disabled)</button>
|
<button type="button" class="btn btn-warning mb-2" disabled>Warning (disabled)</button>
|
||||||
<button type="button" class="btn btn-info" disabled>Info (disabled)</button>
|
<button type="button" class="btn btn-info mb-2" disabled>Info (disabled)</button>
|
||||||
<hr>
|
<hr>
|
||||||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
<button type="button" class="btn btn-outline-primary mb-2">Primary</button>
|
||||||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
<button type="button" class="btn btn-outline-secondary mb-2">Secondary</button>
|
||||||
<button type="button" class="btn btn-outline-success">Success</button>
|
<button type="button" class="btn btn-outline-success mb-2">Success</button>
|
||||||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
<button type="button" class="btn btn-outline-danger mb-2">Danger</button>
|
||||||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
<button type="button" class="btn btn-outline-warning mb-2">Warning</button>
|
||||||
<button type="button" class="btn btn-outline-info">Info</button>
|
<button type="button" class="btn btn-outline-info mb-2">Info</button>
|
||||||
<button type="button" class="btn btn-outline-light">Light</button>
|
<button type="button" class="btn btn-outline-light mb-2">Light</button>
|
||||||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
<button type="button" class="btn btn-outline-dark mb-2">Dark</button>
|
||||||
<hr>
|
<hr>
|
||||||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||||||
<button type="button" class="btn btn-warning btn-sm">Small button</button>
|
<button type="button" class="btn btn-warning btn-sm">Small button</button>
|
||||||
|
|
@ -271,23 +271,23 @@ const pageTitle = "General Components";
|
||||||
<!--end::Header-->
|
<!--end::Header-->
|
||||||
<!--begin::Body-->
|
<!--begin::Body-->
|
||||||
<div class="card-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">Left</button>
|
||||||
<button type="button" class="btn btn-primary">Middle</button>
|
<button type="button" class="btn btn-primary">Middle</button>
|
||||||
<button type="button" class="btn btn-primary">Right</button>
|
<button type="button" class="btn btn-primary">Right</button>
|
||||||
</div>
|
</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-danger">Left</button>
|
||||||
<button type="button" class="btn btn-warning">Middle</button>
|
<button type="button" class="btn btn-warning">Middle</button>
|
||||||
<button type="button" class="btn btn-success">Right</button>
|
<button type="button" class="btn btn-success">Right</button>
|
||||||
</div>
|
</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">Left</button>
|
||||||
<button type="button" class="btn btn-outline-primary">Middle</button>
|
<button type="button" class="btn btn-outline-primary">Middle</button>
|
||||||
<button type="button" class="btn btn-outline-primary">Right</button>
|
<button type="button" class="btn btn-outline-primary">Right</button>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<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">
|
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
|
||||||
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
|
<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">
|
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
|
||||||
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
|
||||||
</div>
|
</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>
|
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
|
||||||
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
|
<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>
|
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<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">1</button>
|
||||||
<button type="button" class="btn btn-primary">2</button>
|
<button type="button" class="btn btn-primary">2</button>
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
|
|
@ -612,8 +612,28 @@ const pageTitle = "General Components";
|
||||||
<!--end::Header-->
|
<!--end::Header-->
|
||||||
<!--begin::Body-->
|
<!--begin::Body-->
|
||||||
<div class="card-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 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 id="toastPrimary" class="toast toast-primary" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<div class="toast-header">
|
<div class="toast-header">
|
||||||
<i class="bi bi-circle me-2"></i>
|
<i class="bi bi-circle me-2"></i>
|
||||||
|
|
@ -625,18 +645,83 @@ const pageTitle = "General Components";
|
||||||
Hello, world! This is a toast message.
|
Hello, world! This is a toast message.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--<button type="button" class="btn btn-warning" data-lte-showtoast="toastWarning">Show live toast</button>-->
|
<div id="toastSecondary" class="toast toast-secondary" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
<!--<div data-lte-toast="toastWarning" class="toast toast-warning" role="alert" aria-live="assertive" aria-atomic="true">-->
|
<div class="toast-header">
|
||||||
<!-- <div class="toast-header">-->
|
<i class="bi bi-circle me-2"></i>
|
||||||
<!-- <i class="bi bi-circle me-2"></i>-->
|
<strong class="me-auto">Bootstrap</strong>
|
||||||
<!-- <strong class="me-auto">Bootstrap</strong>-->
|
<small>11 mins ago</small>
|
||||||
<!-- <small>11 mins ago</small>-->
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||||
<!-- <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>-->
|
</div>
|
||||||
<!-- </div>-->
|
<div class="toast-body">
|
||||||
<!-- <div class="toast-body">-->
|
Hello, world! This is a toast message.
|
||||||
<!-- Hello, world! This is a toast message.-->
|
</div>
|
||||||
<!-- </div>-->
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<!--end::Body-->
|
<!--end::Body-->
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/**
|
/**
|
||||||
* Toast styles to reflect Bootstrap colors
|
* Custom toast styles to reflect Bootstrap colors
|
||||||
*/
|
*/
|
||||||
.toast {
|
.toast {
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
|
@ -15,7 +15,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.toast-danger .toast-header {
|
.toast-danger .toast-header {
|
||||||
//background-color: #dc3545 !important;
|
|
||||||
color: $white !important;
|
color: $white !important;
|
||||||
background-color: $red !important;
|
background-color: $red !important;
|
||||||
border-color: $red;
|
border-color: $red;
|
||||||
|
|
@ -141,4 +140,3 @@
|
||||||
color: #1f2d3d;
|
color: #1f2d3d;
|
||||||
background-color: #ffce3a;
|
background-color: #ffce3a;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue