1 module uim.bootstrap.bs5.demos.components.alerts; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/alerts", 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": "Alerts - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 return 19 H5Main(["style":"margin-top:70px;"], 20 H5Div(["container-fluid", "mt-3", "bg-light"], 21 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 22 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Alerts")), 23 BS5Container(["mt-3"]).row( 24 H5Div(["col-12", "col-lg-2"], 25 listLevels("basic"), 26 listAreas("basic", "components"), 27 listSections("basic", "components", "alerts")), 28 H5Div(["col-12", "col-lg-8"], 29 dateInfo(this), 30 H5H2(["display-4"], "Alerts"), 31 H5Hr, 32 33 demoBs5Example("default", "Default", 34 H5Div( 35 BS5Alert("Primary").color("primary"), 36 BS5Alert("Secondary").color("secondary"), 37 BS5Alert("Success").color("success"), 38 BS5Alert("Danger").color("danger"), 39 BS5Alert("Warning").color("warning"), 40 BS5Alert("Info").color("info"), 41 BS5Alert("Dark").color("dark")), 42 `BS5Alert(["alert-primary"], "Primary") 43 BS5Alert(["alert-secondary"], "Secondary") 44 BS5Alert(["alert-success"], "Success") 45 BS5Alert(["alert-danger"], "Danger") 46 BS5Alert(["alert-warning"], "Warning") 47 BS5Alert(["alert-info"], "Info") 48 BS5Alert(["alert-dark"], "Dark") 49 </code></pre>H5P(["text-muted"]Alternative")<pre><code> 50 BS5Alert("Primary").color("primary") 51 BS5Alert("Secondary").color("secondary") 52 BS5Alert("Success").color("success") 53 BS5Alert("Danger").color("danger") 54 BS5Alert("Warning").color("warning") 55 BS5Alert("Info").color("info") 56 BS5Alert("Dark").color("dark")`, 57 `H5Div(["alert alert-primary" role="alert"]Primary) 58 H5Div(["alert alert-secondary" role="alert"]Secondary) 59 H5Div(["alert alert-success" role="alert"]Success) 60 H5Div(["alert alert-danger" role="alert"]Danger) 61 H5Div(["alert alert-warning" role="alert"]Warning) 62 H5Div(["alert alert-info" role="alert"]Info) 63 H5Div(["alert alert-dark" role="alert"]Dark)`), 64 65 demoBs5Example("link", "Link Farbe", 66 H5Div( 67 BS5Alert(`Primary mit <a href="#" class="alert-link">Beispiellink</a>.`).color("primary"), 68 BS5Alert(`Secondary mit <a href="#" class="alert-link">Beispiellink</a>.`).color("secondary"), 69 BS5Alert(`Success mit <a href="#" class="alert-link">Beispiellink</a>.`).color("success"), 70 BS5Alert(`Danger mit <a href="#" class="alert-link">Beispiellink</a>.`).color("danger"), 71 BS5Alert(`Warning mit <a href="#" class="alert-link">Beispiellink</a>.`).color("warning"), 72 BS5Alert(`Info mit <a href="#" class="alert-link">Beispiellink</a>.`).color("info"), 73 BS5Alert(`Dark mit <a href="#" class="alert-link">Beispiellink</a>.`).color("dark")), 74 `BS5Alert(["alert-primary"], "Primary mit <a href="#" class="alert-link">Beispiellink</a>.") 75 BS5Alert(["alert-secondary"], "Secondary mit <a href="#" class="alert-link">Beispiellink</a>.") 76 BS5Alert(["alert-success"], "Success mit <a href="#" class="alert-link">Beispiellink</a>.") 77 BS5Alert(["alert-danger"], "Danger mit <a href="#" class="alert-link">Beispiellink</a>.") 78 BS5Alert(["alert-warning"], "Warning mit <a href="#" class="alert-link">Beispiellink</a>.") 79 BS5Alert(["alert-info"], "Info mit <a href="#" class="alert-link">Beispiellink</a>.") 80 BS5Alert(["alert-dark"], "Dark mit <a href="#" class="alert-link">Beispiellink</a>.") 81 82 - Weitere Möglichkeit - 83 84 BS5Alert("Primary mit <a href="#" class="alert-link">Beispiellink</a>.").color("primary") 85 BS5Alert("Secondary mit <a href="#" class="alert-link">Beispiellink</a>.").color("secondary") 86 BS5Alert("Success mit <a href="#" class="alert-link">Beispiellink</a>.").color("§success") 87 BS5Alert("Danger mit <a href="#" class="alert-link">Beispiellink</a>.").color("danger") 88 BS5Alert("Warning mit <a href="#" class="alert-link">Beispiellink</a>.").color("warning") 89 BS5Alert("Info mit <a href="#" class="alert-link">Beispiellink</a>.").color("info") 90 BS5Alert("Dark mit <a href="#" class="alert-link">Beispiellink</a>.").color("dark")`, 91 `H5Div(["alert alert-primary" role="alert"]Primary mit <a href="#" class="alert-link">Beispiellink</a>.) 92 H5Div(["alert alert-secondary" role="alert"]Secondary mit <a href="#" class="alert-link">Beispiellink</a>.) 93 H5Div(["alert alert-success" role="alert"]Success mit <a href="#" class="alert-link">Beispiellink</a>.) 94 H5Div(["alert alert-danger" role="alert"]Danger mit <a href="#" class="alert-link">Beispiellink</a>.) 95 H5Div(["alert alert-warning" role="alert"]Warning mit <a href="#" class="alert-link">Beispiellink</a>.) 96 H5Div(["alert alert-info" role="alert"]Info mit <a href="#" class="alert-link">Beispiellink</a>.) 97 H5Div(["alert alert-dark" role="alert"]Dark mit <a href="#" class="alert-link">Beispiellink</a>.)`), 98 99 demoBs5Example("addition", "Zusätzliche Inhalte", 100 H5Div( 101 BS5Alert.color("success")( 102 H5H4(["alert-heading"], "Success!"), 103 H5P("You have accomplished <a href=\"#\" class=\"alert-link\"]your goal</a>."), 104 H5P("You can now continue and start defining a new goal to reach.")), 105 BS5Alert.color("danger")( 106 H5H4(["alert-heading"], "Danger!"), 107 H5P("Something is wrong. <a href=\"#\" class=\"alert-link\"]Please try again.</a>"), 108 H5P("Make sure that you enter the correct user name and corresponding password."), 109 ), 110 BS5Alert.color("warning")( 111 H5H4(["alert-heading"], "Warning!"), 112 H5P("Be careful when you <a href=\"#\" class=\"alert-link\"]drive.</a>"), 113 H5P("Driving is a serious task and should thus be taken seriously.")), 114 BS5Alert.color("info")( 115 H5H4(["alert-heading"], "Info!"), 116 H5P("Please read the provided <a href=\"#\" class=\"alert-link\"]information.</a>"), 117 H5P("The information will help you get a better understanding of the topic."))), 118 `H5Div(["alert alert-success" role="alert"] 119 <h4 ["alert-heading"]Success!") 120 <p>You have accomplished H5A(["href":"#", ["alert-link"]your goal</a>.") 121 <p>You can now continue and start defining a new goal to reach.") 122 ) 123 H5Div(["alert alert-danger" role="alert"] 124 <h4 ["alert-heading"]Danger!") 125 <p>Something is wrong. H5A(["href":"#", ["alert-link"]Please try again.</a>") 126 <p>Make sure that you enter the correct user name and corresponding password.") 127 ) 128 H5Div(["alert alert-warning" role="alert"] 129 <h4 ["alert-heading"]Warning!") 130 <p>Be careful when you H5A(["href":"#", ["alert-link"]drive.</a>") 131 <p>Driving is a serious task and should thus be taken seriously.") 132 ) 133 H5Div(["alert alert-info" role="alert"] 134 <h4 ["alert-heading"]Info!") 135 <p>Please read the provided H5A(["href":"#", ["alert-link"]information.</a>") 136 <p>The information will help you get a better understanding of the topic.") 137 )`, 138 `BS5Alert.color("success")( 139 H5H4(["alert-heading"], "Success!"), 140 H5P("You have accomplished <a href=\"#\" class=\"alert-link\"]your goal</a>."), 141 H5P("You can now continue and start defining a new goal to reach.")), 142 BS5Alert.color("danger")( 143 H5H4(["alert-heading"], "Danger!"), 144 H5P("Something is wrong. <a href=\"#\" class=\"alert-link\"]Please try again.</a>"), 145 H5P("Make sure that you enter the correct user name and corresponding password."), 146 ), 147 BS5Alert.color("warning")( 148 H5H4(["alert-heading"], "Warning!"), 149 H5P("Be careful when you <a href=\"#\" class=\"alert-link\"]drive.</a>"), 150 H5P("Driving is a serious task and should thus be taken seriously.")), 151 BS5Alert.color("info")( 152 H5H4(["alert-heading"], "Info!"), 153 H5P("Please read the provided <a href=\"#\" class=\"alert-link\"]information.</a>"), 154 H5P("The information will help you get a better understanding of the topic.") 155 )`), 156 157 demoBs5Example("dismissing", "Entfernbar", 158 H5Div( 159 BS5Alert(["alert-success", "alert-dismissible", "fade", "show"], 160 BS5Button(["btn-close"], ["data-bs-dismiss":"alert", "aria-label":"Close"]), 161 H5Strong("Achtung!"), H5String(" Dieser Alert verschwindet, wenn der × Button getätigt wird."))), 162 `H5Div(["alert alert-success alert-dismissible fade show" role="alert"] 163 H5Button(["type":"button" ["btn-close" data-bs-dismiss="alert" "aria-label":"Close"]") 164 <strong>Achtung!</strong> Dieser Alert verschwindet, wenn der × Button getätigt wird. 165 )`, 166 `BS5Alert(["alert-success", "alert-dismissible", "fade", "show"], 167 BS5Button(["btn-close"], ["data-bs-dismiss":"alert", "aria-label":"Close"]), 168 H5Strong("Achtung!"), H5String(" Dieser Alert verschwindet, wenn der × Button getätigt wird.") 169 )`) 170 171 ), 172 H5Div(["col-12", "col-lg-2"]))).toString; 173 } 174 }); 175 }