1 module uim.bootstrap.bs5.demos.components.progresses; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/progresses", 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": "Progresses - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto noExample = demoBs5Example("no", "Progress with no progress", 20 H5Div( 21 BS5Progress 22 .bar(["aria-valuenow":"0", "aria-valuemin":"0", "aria-valuemax":"100"]) 23 ), `BS5Progress( 24 BS5ProgressBar(["aria-valuenow":"0", "aria-valuemin":"0", "aria-valuemax":"100"])) 25 26 --- Compact version --- 27 28 BS5Progress 29 .bar(["aria-valuenow":"0", "aria-valuemin":"0", "aria-valuemax":"100"]) 30 `, `<div class="progress"> 31 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar"></div> 32 </div>`); 33 34 auto inlineExample = demoBs5Example("inline", "Width using inline styles", 35 H5Div( 36 BS5Progress 37 .bar(["style":"width: 15%", "aria-valuenow":"15", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 38 BS5Progress 39 .bar(["style":"width: 33%", "aria-valuenow":"33", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 40 BS5Progress 41 .bar(["style":"width: 62%", "aria-valuenow":"62", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 42 BS5Progress 43 .bar(["style":"width: 75%", "aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 44 BS5Progress 45 .bar(["style":"width: 100%", "aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"]) 46 ), `BS5Progress( 47 BS5ProgressBar(["style":"width: 15%", "aria-valuenow":"15", "aria-valuemin":"0", "aria-valuemax":"100"])) 48 BS5Progress( 49 BS5ProgressBar(["style":"width: 33%", "aria-valuenow":"33", "aria-valuemin":"0", "aria-valuemax":"100"])) 50 BS5Progress( 51 BS5ProgressBar(["style":"width: 62%", "aria-valuenow":"62", "aria-valuemin":"0", "aria-valuemax":"100"])) 52 BS5Progress( 53 BS5ProgressBar(["style":"width: 75%", "aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"])) 54 BS5Progress( 55 BS5ProgressBar(["style":"width: 100%", "aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"])) 56 57 --- Compact version --- 58 59 BS5Progress 60 .bar(["style":"width: 15%", "aria-valuenow":"15", "aria-valuemin":"0", "aria-valuemax":"100"]) 61 BS5Progress 62 .bar(["style":"width: 33%", "aria-valuenow":"33", "aria-valuemin":"0", "aria-valuemax":"100"]) 63 BS5Progress 64 .bar(["style":"width: 62%", "aria-valuenow":"62", "aria-valuemin":"0", "aria-valuemax":"100"]) 65 BS5Progress 66 .bar(["style":"width: 75%", "aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"]) 67 BS5Progress 68 .bar(["style":"width: 100%", "aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"])`, 69 `<div class="progress"> 70 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" role="progressbar" style="width: 15%"></div> 71 </div> 72 <div class="progress"> 73 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" style="width: 33%"></div> 74 </div> 75 <div class="progress"> 76 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="62" role="progressbar" style="width: 62%"></div> 77 </div> 78 <div class="progress"> 79 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" style="width: 75%"></div> 80 </div> 81 <div class="progress"> 82 <div class="progress-bar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" style="width: 100%"></div> 83 </div>`); 84 85 auto sizingExample = demoBs5Example("sizing", "Width using sizing classes w-25, w-50. w-75, w-100", 86 H5Div( 87 BS5Progress 88 .bar(["w-25"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 89 BS5Progress 90 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 91 BS5Progress 92 .bar(["w-75"], ["aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 93 BS5Progress 94 .bar(["w-100"], ["aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"]) 95 ), `BS5Progress( 96 BS5ProgressBar(["w-25"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"])) 97 BS5Progress( 98 BS5ProgressBar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 99 BS5Progress( 100 BS5ProgressBar(["w-75"], ["aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"])) 101 BS5Progress( 102 BS5ProgressBar(["w-100"], ["aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"])) 103 104 --- Compact version --- 105 106 BS5Progress 107 .bar(["w-25"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 108 BS5Progress 109 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 110 BS5Progress 111 .bar(["w-75"], ["aria-valuenow":"75", "aria-valuemin":"0", "aria-valuemax":"100"]) 112 BS5Progress 113 .bar(["w-100"], ["aria-valuenow":"100", "aria-valuemin":"0", "aria-valuemax":"100"])`, 114 `<div class="progress"> 115 <div class="progress-bar w-25" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar"></div> 116 </div> 117 <div class="progress"> 118 <div class="progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 119 </div> 120 <div class="progress"> 121 <div class="progress-bar w-75" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar"></div> 122 </div> 123 <div class="progress"> 124 <div class="progress-bar w-100" aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar"></div> 125 </div>`); 126 127 auto labelExample = demoBs5Example("label", "Progress with a label", 128 H5Div( 129 BS5Progress 130 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"], "50%") 131 ), `BS5Progress( 132 BS5ProgressBar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"], "50%")) 133 134 --- Compact version --- 135 136 BS5Progress 137 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"], "50%")`, 138 `<div class="progress"> 139 <div class="progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar">50%</div> 140 </div>`); 141 142 auto heightExample = demoBs5Example("height", "Height using inline styles", 143 H5Div( 144 BS5Progress(["style":"height: 0.5rem;"]) 145 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 146 BS5Progress(["style":"height: 2rem;"]) 147 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 148 ), `BS5Progress(["style":"height: 0.5rem;"], 149 BS5ProgressBar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 150 BS5Progress(["style":"height: 2rem;"], 151 BS5ProgressBar(["w-50"], ["aria-valuenow":"50", "aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 152 153 --- Compact version --- 154 155 BS5Progress(["style":"height: 0.5rem;"]) 156 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 157 BS5Progress(["style":"height: 2rem;"]) 158 .bar(["w-50"], ["aria-valuenow":"50", "aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])`, 159 `<div class="progress" style="height: 0.5rem;"> 160 <div class="progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 161 </div> 162 <div class="progress" style="height: 2rem;"> 163 <div class="progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 164 </div>`); 165 166 auto backgroundExample = demoBs5Example("background", "Background colors", 167 H5Div( 168 BS5Progress 169 .bar(["w-50", "bg-primary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 170 BS5Progress 171 .bar(["w-50", "bg-secondary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 172 BS5Progress 173 .bar(["w-50", "bg-success"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 174 BS5Progress 175 .bar(["w-50", "bg-danger"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 176 BS5Progress 177 .bar(["w-50", "bg-warning"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 178 BS5Progress 179 .bar(["w-50", "bg-info"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 180 BS5Progress 181 .bar(["w-50", "bg-light", "text-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), H5Br, 182 BS5Progress 183 .bar(["w-50", "bg-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]), 184 ), `BS5Progress( 185 BS5ProgressBar(["w-50", "bg-primary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 186 BS5Progress( 187 BS5ProgressBar(["w-50", "bg-secondary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 188 BS5Progress( 189 BS5ProgressBar(["w-50", "bg-success"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 190 BS5Progress( 191 BS5ProgressBar(["w-50", "bg-danger"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 192 BS5Progress( 193 BS5ProgressBar(["w-50", "bg-warning"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 194 BS5Progress( 195 BS5ProgressBar(["w-50", "bg-info"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 196 BS5Progress( 197 BS5ProgressBar(["w-50", "bg-light", "text-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 198 BS5Progress( 199 BS5ProgressBar(["w-50", "bg-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 200 201 --- Compact Version --- 202 203 BS5Progress 204 .bar(["w-50", "bg-primary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 205 BS5Progress 206 .bar(["w-50", "bg-secondary"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 207 BS5Progress 208 .bar(["w-50", "bg-success"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 209 BS5Progress 210 .bar(["w-50", "bg-danger"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 211 BS5Progress 212 .bar(["w-50", "bg-warning"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 213 BS5Progress 214 .bar(["w-50", "bg-info"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 215 BS5Progress 216 .bar(["w-50", "bg-light", "text-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 217 BS5Progress 218 .bar(["w-50", "bg-dark"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])`, 219 `<div class="progress"> 220 <div class="bg-primary progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 221 </div> 222 <div class="progress"> 223 <div class="bg-secondary progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 224 </div> 225 <div class="progress"> 226 <div class="bg-success progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 227 </div> 228 <div class="progress"> 229 <div class="bg-danger progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 230 </div> 231 <div class="progress"> 232 <div class="bg-warning progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 233 </div> 234 <div class="progress"> 235 <div class="bg-info progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 236 </div> 237 <div class="progress"> 238 <div class="bg-light progress-bar text-dark w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 239 </div> 240 <div class="progress"> 241 <div class="bg-dark progress-bar w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 242 </div> 243 `); 244 245 auto stripesExample = demoBs5Example("stripes", "Stripes", 246 H5Div( 247 BS5Progress 248 .bar(["progress-bar-striped", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 249 ), `BS5Progress( 250 BS5ProgressBar(["progress-bar-striped", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 251 252 --- Compact version --- 253 254 BS5Progress 255 .bar(["progress-bar-striped", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 256 `, `<div class="progress"> 257 <div class="progress-bar progress-bar-animated progress-bar-striped w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 258 </div>`); 259 260 auto animatedExample = demoBs5Example("animated", "Animated Stripes", 261 H5Div( 262 BS5Progress 263 .bar(["progress-bar-striped", "progress-bar-animated", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 264 ), `BS5Progress( 265 BS5ProgressBar(["progress-bar-striped", "progress-bar-animated", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"])) 266 267 --- Compact version --- 268 269 BS5Progress 270 .bar(["progress-bar-striped", "progress-bar-animated", "w-50"], ["aria-valuenow":"50", "aria-valuemin":"0", "aria-valuemax":"100"]) 271 `, `<div class="progress"> 272 <div class="progress-bar progress-bar-striped w-50" aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" role="progressbar"></div> 273 </div>`); 274 275 auto multipleExample = demoBs5Example("multiple", "Multiple progress bars", 276 H5Div( 277 BS5Progress 278 .bar(["w-25", "bg-info"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 279 .bar(["w-25", "bg-warning"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 280 .bar(["w-25", "bg-danger"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 281 ), `BS5Progress( 282 BS5ProgressBar(["w-25", "bg-info"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]), 283 BS5ProgressBar(["w-25", "bg-warning"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]), 284 BS5ProgressBar(["w-25", "bg-danger"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"])) 285 286 --- Compact version --- 287 288 BS5Progress 289 .bar(["w-25", "bg-info"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 290 .bar(["w-25", "bg-warning"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 291 .bar(["w-25", "bg-danger"], ["aria-valuenow":"25", "aria-valuemin":"0", "aria-valuemax":"100"]) 292 `, `<div class="progress"> 293 <div class="bg-info progress-bar w-25" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar"></div> 294 <div class="bg-warning progress-bar w-25" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar"></div> 295 <div class="bg-danger progress-bar w-25" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar"></div> 296 </div>`); 297 298 return 299 H5Main(["style":"margin-top:70px;"], 300 H5Div(["container-fluid", "mt-3", "bg-light"], 301 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 302 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Progresses")), 303 304 BS5Container(["mt-3"]).row( 305 H5Div(["col-12", "col-lg-2"], 306 listLevels("basic"), 307 listAreas("basic", "components"), 308 listSections("basic", "components", "progresses")), 309 H5Div(["col-12", "col-lg-8"], 310 dateInfo(this), 311 H5H2(["display-4"], "Progresses"), 312 H5Hr, 313 314 noExample, 315 inlineExample, 316 sizingExample, 317 labelExample, 318 heightExample, 319 backgroundExample, 320 stripesExample, 321 animatedExample, 322 multipleExample 323 324 ), 325 H5Div(["col-12", "col-lg-2"]))).toString; 326 } 327 }); 328 }