Skip to content

Commit 08b3ebc

Browse files
zuramaizuramai
committed
feat: component toasts page
1 parent 485fe8b commit 08b3ebc

File tree

6 files changed

+103
-4
lines changed

6 files changed

+103
-4
lines changed

‎src/assets/js/pages/component-toasts.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const toastTrigger = document.getElementById("liveToastBtn")
2+
const toastLiveExample = document.getElementById("liveToast")
3+
if (toastTrigger) {
4+
toastTrigger.addEventListener("click", () => {
5+
const toast = new bootstrap.Toast(toastLiveExample)
6+
7+
toast.show()
8+
})
9+
}

‎src/assets/scss/_variables.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1281,12 +1281,12 @@ $toast-max-width: 350px !default;
12811281
$toast-padding-x: .75rem !default;
12821282
$toast-padding-y: .5rem !default;
12831283
$toast-font-size: .875rem !default;
1284-
$toast-color: null !default;
1284+
$toast-color: $gray-800 !default;
12851285
$toast-background-color: rgba($white, .85) !default;
12861286
$toast-border-width: 1px !default;
1287-
$toast-border-color: rgba(0, 0, 0, .1) !default;
1288-
$toast-border-radius: $border-radius !default;
1289-
$toast-box-shadow: $box-shadow !default;
1287+
$toast-border-color: rgba(56, 56, 56, 0.1) !default;
1288+
$toast-border-radius: .3rem;
1289+
$toast-box-shadow: 0 0.5rem 1.5rem rgba(40, 40, 40, 0.1) !default;
12901290
$toast-spacing: $container-padding-x !default;
12911291

12921292
$toast-header-color: $gray-600 !default;

‎src/assets/scss/themes/dark/_mazer-dark.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
.toast .btn-close {
2+
background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
3+
}
14

25
// Sweetalert2 Dark
36
.swal2-popup, .swal2-validation-message {

‎src/assets/scss/themes/dark/_variables-dark.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,6 +231,14 @@ $carousel-caption-color: $white;
231231
$carousel-dark-indicator-active-bg: $black;
232232
$carousel-dark-caption-color: $black;
233233

234+
// Toasts
235+
$toast-color: $body-color ;
236+
$toast-background-color: rgba(44, 46, 66, .85) ;
237+
$toast-header-color: $white;
238+
$toast-header-background-color: #12121e;
239+
240+
241+
234242
$btn-close-color: $black;
235243
$code-color: $pink;
236244
$kbd-color: $white;

‎src/component-toasts.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{% set title = 'Toast' %}
2+
{% set filename = 'component-toasts.html' %}
3+
4+
{% extends 'layouts/master.html' %}
5+
{% block content %}
6+
<div class="page-heading">
7+
<div class="page-title">
8+
<div class="row">
9+
<div class="col-12 col-md-6 order-md-1 order-last">
10+
<h3>Toast</h3>
11+
<p class="text-subtitle text-muted">Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.</p>
12+
</div>
13+
<div class="col-12 col-md-6 order-md-2 order-first">
14+
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
15+
<ol class="breadcrumb">
16+
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
17+
<li class="breadcrumb-item active" aria-current="page">Toasts</li>
18+
</ol>
19+
</nav>
20+
</div>
21+
</div>
22+
</div>
23+
<section class="section">
24+
<div class="row">
25+
<div class="col-md-6 col-12">
26+
<div class="card">
27+
<div class="card-header">
28+
<h5>Basic Toasts</h5>
29+
</div>
30+
<div class="card-body">
31+
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
32+
<div class="toast-header">
33+
<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>
34+
<strong class="me-auto">Bootstrap</strong>
35+
<small>11 mins ago</small>
36+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
37+
</div>
38+
<div class="toast-body">
39+
Hello, world! This is a toast message.
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<div class="col-md-6 col-12">
46+
<div class="card">
47+
<div class="card-header">
48+
<h5>Open Toast Buttons</h5>
49+
</div>
50+
<div class="card-body">
51+
<p>Click the button to show toasts.</p>
52+
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
53+
<div class="toast-container position-fixed bottom-0 end-0 p-3">
54+
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
55+
<div class="toast-header">
56+
<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>
57+
<strong class="me-auto">Bootstrap</strong>
58+
<small>11 mins ago</small>
59+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
60+
</div>
61+
<div class="toast-body">
62+
Hello, world! This is a toast message.
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
</div>
72+
{% endblock %}
73+
{% block js %}
74+
<script src="assets/js/pages/component-toasts.js"></script>
75+
{% endblock %}

‎src/sidebar-items.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@
6969
"name": "Spinner",
7070
"url": "component-spinner.html"
7171
},
72+
{
73+
"name": "Toasts",
74+
"url": "component-toasts.html"
75+
},
7276
{
7377
"name": "Tooltip",
7478
"url": "component-tooltip.html"

0 commit comments

Comments
 (0)