1 module uim.bootstrap.bs5.demos.components.toasts; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/toasts", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Toasts - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto defaultExample = demoBs5Example("default", "Default", 20 H5Div( 21 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 22 H5H3(["text-muted"], "Default"), 23 H5P("Delay = 5000 ms, auto-hide = true, animation = true"), 24 H5Div( 25 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true"], 26 H5Div(["toast-header"], 27 H5Strong(["me-auto"], "Toast header"), 28 H5Small("9 minutes ago")), 29 H5Div(["toast-body"], "Toast body text goes here.")))) 30 ), ``, ``); 31 32 auto delayExample = demoBs5Example("delay", "Delay", 33 H5Div( 34 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 35 H5H3(["text-muted"], "Delay"), 36 H5P("Delay = 3000 ms, auto-hide = true, animation = true"), 37 H5Div( 38 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-delay":"3000"], 39 H5Div(["toast-header"], 40 H5Strong(["me-auto"], "Toast header"), 41 H5Small("9 minutes ago")), 42 H5Div(["toast-body"], "Toast body text goes here.")))) 43 ), ``, ``); 44 45 auto autohideExample = demoBs5Example("autohide", "Autohide", 46 H5Div( 47 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 48 H5H3(["text-muted"], "Autohide"), 49 H5P("Delay = 5000 ms, auto-hide = false, animation = true"), 50 H5Div( 51 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-autohide":"false"], 52 H5Div(["toast-header"], 53 H5Strong(["me-auto"], "Toast header"), 54 H5Small("9 minutes ago")), 55 H5Button(["btn-close", "ms-2 mb-1"], ["type":"button", "data-bs-dismiss":"toast", "aria-label":"Close"])), 56 H5Div(["toast-body"], "Toast body text goes here."))) 57 ), ``, ``); 58 59 auto animationExample = demoBs5Example("animation", "Animation", 60 H5Div( 61 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 62 H5H3(["text-muted"], "Animation"), 63 H5P("Delay = 5000 ms, auto-hide = false, animation = false"), 64 H5Div( 65 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-autohide":"false", "data-bs-animation":"false"], 66 H5Div(["toast-header"], 67 H5Strong(["me-auto"], "Toast header"), 68 H5Small("9 minutes ago")), 69 H5Button(["btn-close", "ms-2 mb-1"], ["type":"button", "data-bs-dismiss":"toast", "aria-label":"Close"])), 70 H5Div(["toast-body"], "Toast body text goes here."))) 71 ), ``, ``); 72 73 auto translucentExample = demoBs5Example("translucent", "Translucent", 74 H5Div( 75 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 76 H5H3(["text-muted"], "Translucent"), 77 H5Div( 78 H5Div(["bg-dark", "p-3"], 79 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-autohide":"false"], 80 H5Div(["toast-header"], 81 H5Strong(["me-auto"], "Toast header"), 82 H5Small("9 minutes ago")), 83 H5Button(["btn-close", "ms-2 mb-1"], ["type":"button", "data-bs-dismiss":"toast", "aria-label":"Close"])), 84 H5Div(["toast-body"], "Toast body text goes here.")))) 85 ), ``, ``); 86 87 auto multipleExample = demoBs5Example("multiple", "Multiple", 88 H5Div( 89 H5Div(["mb-5"], ["data-js":"var toastElements = document.querySelectorAll('.toast'); for (var i = 0; i < toastElements.length; i++) { 	new bootstrap.Toast(toastElements[i]).show(); }"], 90 H5H3(["text-muted"], "Multiple"), 91 H5Div( 92 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-autohide":"false"], 93 H5Div(["toast-header"], 94 H5Strong(["me-auto"], "Toast header"), 95 H5Small("9 minutes ago")), 96 H5Button(["btn-close", "ms-2 mb-1"], ["type":"button", "data-bs-dismiss":"toast", "aria-label":"Close"]))), 97 H5Div(["toast-body"], "Toast body text goes here."), 98 H5Div(["toast"], ["role":"alert", "aria-live":"assertive", "aria-atomic":"true", "data-bs-autohide":"false"], 99 H5Div(["toast-header"], 100 H5Strong(["me-auto"], "Toast header"), 101 H5Small("9 minutes ago")), 102 H5Button(["btn-close", "ms-2 mb-1"], ["type":"button", "data-bs-dismiss":"toast", "aria-label":"Close"]))), 103 H5Div(["toast-body"], "Toast body text goes here.") 104 ), ``, ``); 105 106 /* auto multipleExample = demoBs5Example("multiple", "Multiple", 107 H5Div( 108 H5H3(["text-muted"], "Alignment and placement") 109 H5H5(["text-muted", "mt-3"], "<a href="position-utilities.html"]Position</a> utilities") 110 <iframe src="toasts/placement-position.html" "style":"width: 100%; height: 456px;"]</iframe> 111 112 H5H5(["text-muted", "mt-3"], "<a href="flex.html"]Flex</a> utilities") 113 <iframe src="toasts/placement-flex.html" "style":"width: 100%; height: 551px;"]</iframe> 114 ), ``, ``); */ 115 116 return 117 H5Main(["style":"margin-top:70px;"], 118 H5Div(["container-fluid", "mt-3", "bg-light"], 119 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 120 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Toasts")), 121 122 BS5Container(["mt-3"]).row( 123 H5Div(["col-12", "col-lg-2"], 124 listLevels("basic"), 125 listAreas("basic", "components"), 126 listSections("basic", "components", "toasts")), 127 H5Div(["col-12", "col-lg-8"], 128 dateInfo(this), 129 H5H2(["display-4"], "Toasts"), 130 H5Hr, 131 132 defaultExample, 133 delayExample, 134 autohideExample, 135 animationExample, 136 translucentExample, 137 multipleExample 138 139 ), 140 H5Div(["col-12", "col-lg-2"]))).toString; 141 } 142 }); 143 }