1 module uim.bootstrap.bs5.demos.components.dropdowns; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/dropdowns", 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": "Dropdowns - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto buttonExample = demoBs5Example("button", "Button", 20 H5Div( 21 BS5Dropdown( 22 BS5DropdownToggle("dropdownButton", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 23 BS5DropdownMenu(["aria-labelledby":"dropdownButton"]) 24 .link(["href":"#"], "Item 1") 25 .link(["href":"#"], "Item 2") 26 .link(["href":"#"], "Item 3")) 27 ), 28 `BS5Dropdown( 29 BS5DropdownToggle("dropdownButton", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 30 BS5DropdownMenu(["aria-labelledby":"dropdownButton"], 31 BS5DropdownLink(["href":"#"], "Item 1"), 32 BS5DropdownLink(["href":"#"], "Item 2"), 33 BS5DropdownLink(["href":"#"], "Item 3"))) 34 35 --- Compact version --- 36 37 BS5Dropdown( 38 BS5DropdownToggle("dropdownButton", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 39 BS5DropdownMenu(["aria-labelledby":"dropdownButton"]) 40 .link(["href":"#"], "Item 1") 41 .link(["href":"#"], "Item 2") 42 .link(["href":"#"], "Item 3")) 43 44 `, 45 `<div class="dropdown"> 46 <button id="dropdownButton" class="btn btn-secondary dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" type="button">Dropdown button</button> 47 <div class="dropdown-menu" aria-labelledby="dropdownButton"> 48 <a class="dropdown-item" href="#">Item 1</a> 49 <a class="dropdown-item" href="#">Item 2</a> 50 <a class="dropdown-item" href="#">Item 3</a> 51 </div> 52 </div>`); 53 54 auto linkExample = demoBs5Example("link", "Link", 55 H5Div( 56 BS5Dropdown( 57 BS5DropdownToggleLink("dropdownLink", ["btn-secondary"], ["href":"#", "data-bs-toggle":"dropdown"], "Dropdown Link"), 58 BS5DropdownMenu(["aria-labelledby":"dropdownLink"]) 59 .link(["href":"#"], "Item 1") 60 .link(["href":"#"], "Item 2") 61 .link(["href":"#"], "Item 3")) 62 ), 63 `BS5Dropdown( 64 BS5DropdownToggleLink("dropdownLink", ["btn-secondary"], ["href":"#", "data-bs-toggle":"dropdown"], "Dropdown Link"), 65 BS5DropdownMenu(["aria-labelledby":"dropdownLink"], 66 BS5DropdownLink(["href":"#"], "Item 1"), 67 BS5DropdownLink(["href":"#"], "Item 2"), 68 BS5DropdownLink(["href":"#"], "Item 3"))) 69 70 --- Compact version --- 71 72 BS5Dropdown( 73 BS5DropdownToggleLink("dropdownLink", ["btn-secondary"], ["href":"#", "data-bs-toggle":"dropdown"], "Dropdown Link"), 74 BS5DropdownMenu(["aria-labelledby":"dropdownLink"]) 75 .link(["href":"#"], "Item 1") 76 .link(["href":"#"], "Item 2") 77 .link(["href":"#"], "Item 3")) 78 `, 79 `H5Div(["dropdown"] 80 <a ["btn btn-secondary dropdown-toggle" href="#" id="dropdownLink" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown link</a> 81 H5Div(["dropdown-menu" aria-labelledby="dropdownLink"] 82 <a href="#" ["dropdown-item"]Item 1</a> 83 <a href="#" ["dropdown-item"]Item 2</a> 84 <a href="#" ["dropdown-item"]Item 3</a> 85 ) 86 )`); 87 88 auto splitExample = demoBs5Example("split", "Split button", 89 H5Div( 90 BS5ButtonGroup( 91 BS5Button(["btn-secondary"], "Dropdown split button"), 92 BS5DropdownToggle("dropdownSplit", ["btn-secondary", "dropdown-toggle-split"], ["data-bs-toggle":"dropdown"], H5Span(["visually-hidden"],"Toggle dropdown")), 93 BS5DropdownMenu(["aria-labelledby":"dropdownSplit"]) 94 .link(["href":"#"], "Item 1") 95 .link(["href":"#"], "Item 2") 96 .link(["href":"#"], "Item 3")) 97 ), 98 `BS5ButtonGroup( 99 BS5Button(["btn-secondary"], "Dropdown split button"), 100 BS5DropdownToggle("dropdownSplit", ["btn-secondary", "dropdown-toggle-split"], ["data-bs-toggle":"dropdown"], H5Span(["visually-hidden"],"Toggle dropdown")), 101 BS5DropdownMenu(["aria-labelledby":"dropdownSplit"], 102 BS5DropdownLink(["href":"#"], "Item 1"), 103 BS5DropdownLink(["href":"#"], "Item 2"), 104 BS5DropdownLink(["href":"#"], "Item 3"))) 105 106 --- Compact version --- 107 108 BS5ButtonGroup( 109 BS5Button(["btn-secondary"], "Dropdown split button"), 110 BS5DropdownToggle("dropdownSplit", ["btn-secondary", "dropdown-toggle-split"], ["data-bs-toggle":"dropdown"], H5Span(["visually-hidden"],"Toggle dropdown")), 111 BS5DropdownMenu(["aria-labelledby":"dropdownSplit"], 112 .link(["href":"#"], "Item 1") 113 .link(["href":"#"], "Item 2") 114 .link(["href":"#"], "Item 3"))`, 115 `H5Div(["btn-group"] 116 H5Button(["type":"button" ["btn btn-secondary"]Dropdown split button") 117 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownSplit" data-bs-toggle="dropdown" aria-expanded="false"]H5Span(["visually-hidden"]Toggle dropdown")") 118 H5Div(["dropdown-menu" aria-labelledby="dropdownSplit"] 119 <a href="#" ["dropdown-item"]Item 1</a> 120 <a href="#" ["dropdown-item"]Item 2</a> 121 <a href="#" ["dropdown-item"]Item 3</a> 122 ) 123 )`); 124 125 auto sizingExample = demoBs5Example("sizing", "Sizing", 126 H5Div( 127 BS5Dropdown( 128 BS5DropdownToggle("dropdownSmall", ["btn-secondary", "btn-sm"], ["data-bs-toggle":"dropdown"], "Small button"), 129 BS5DropdownMenu(["aria-labelledby":"dropdownSmall"], 130 BS5DropdownLink(["href":"#"], "Item 1"), 131 BS5DropdownLink(["href":"#"], "Item 2"), 132 BS5DropdownLink(["href":"#"], "Item 3"))), 133 H5Br, 134 BS5Dropdown( 135 BS5DropdownToggle("dropdownMedium", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Medium button"), 136 BS5DropdownMenu(["aria-labelledby":"dropdownMedium"], 137 BS5DropdownLink(["href":"#"], "Item 1"), 138 BS5DropdownLink(["href":"#"], "Item 2"), 139 BS5DropdownLink(["href":"#"], "Item 3"))), 140 H5Br, 141 BS5Dropdown( 142 BS5DropdownToggle("dropdownLarge", ["btn-secondary", "btn-lg"], ["data-bs-toggle":"dropdown"], "Large button"), 143 BS5DropdownMenu(["aria-labelledby":"dropdownLarge"], 144 BS5DropdownLink(["href":"#"], "Item 1"), 145 BS5DropdownLink(["href":"#"], "Item 2"), 146 BS5DropdownLink(["href":"#"], "Item 3"))) 147 ), 148 `BS5Dropdown( 149 BS5DropdownToggle("dropdownSmall", ["btn-secondary", "btn-sm"], ["data-bs-toggle":"dropdown"], "Small button"), 150 BS5DropdownMenu(["aria-labelledby":"dropdownSmall"], 151 BS5DropdownLink(["href":"#"], "Item 1"), 152 BS5DropdownLink(["href":"#"], "Item 2"), 153 BS5DropdownLink(["href":"#"], "Item 3"))), 154 H5Br, 155 BS5Dropdown( 156 BS5DropdownToggle("dropdownMedium", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Medium button"), 157 BS5DropdownMenu(["aria-labelledby":"dropdownMedium"], 158 BS5DropdownLink(["href":"#"], "Item 1"), 159 BS5DropdownLink(["href":"#"], "Item 2"), 160 BS5DropdownLink(["href":"#"], "Item 3"))), 161 H5Br, 162 BS5Dropdown( 163 BS5DropdownToggle("dropdownLarge", ["btn-secondary", "btn-lg"], ["data-bs-toggle":"dropdown"], "Large button"), 164 BS5DropdownMenu(["aria-labelledby":"dropdownLarge"], 165 BS5DropdownLink(["href":"#"], "Item 1"), 166 BS5DropdownLink(["href":"#"], "Item 2"), 167 BS5DropdownLink(["href":"#"], "Item 3")))`, 168 `H5Div(["dropdown"] 169 H5Button(["type":"button" ["btn btn-secondary btn-sm dropdown-toggle" id="dropdownSmall" data-bs-toggle="dropdown" aria-expanded="false"]Small button") 170 H5Div(["dropdown-menu" aria-labelledby="dropdownSmall"] 171 <a href="#" ["dropdown-item"]Item 1</a> 172 <a href="#" ["dropdown-item"]Item 2</a> 173 <a href="#" ["dropdown-item"]Item 3</a> 174 ) 175 ) 176 H5Br, 177 H5Div(["dropdown"] 178 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownMedium" data-bs-toggle="dropdown" aria-expanded="false"]Medium button") 179 H5Div(["dropdown-menu" aria-labelledby="dropdownMedium"] 180 <a href="#" ["dropdown-item"]Item 1</a> 181 <a href="#" ["dropdown-item"]Item 2</a> 182 <a href="#" ["dropdown-item"]Item 3</a> 183 ) 184 ) 185 H5Br, 186 H5Div(["dropdown"] 187 H5Button(["type":"button" ["btn btn-secondary btn-lg dropdown-toggle" id="dropdownLarge" data-bs-toggle="dropdown" aria-expanded="false"]Large button") 188 H5Div(["dropdown-menu" aria-labelledby="dropdownLarge"] 189 <a href="#" ["dropdown-item"]Item 1</a> 190 <a href="#" ["dropdown-item"]Item 2</a> 191 <a href="#" ["dropdown-item"]Item 3</a> 192 ) 193 )`); 194 195 auto darkExample = demoBs5Example("dark", "Dark", 196 H5Div( 197 BS5Dropdown( 198 BS5DropdownToggle("dropdownDark", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown dark"), 199 BS5DropdownMenu(["aria-labelledby":"dropdownDark"]) 200 .link(["href":"#"], "Item 1") 201 .link(["href":"#"], "Item 2") 202 .link(["href":"#"], "Item 3")) 203 ), ``, ``); 204 205 auto navbarExample = demoBs5Example("navbar", "Navbar component", 206 H5Div( 207 BS5Navbar(["navbar-dark", "bg-dark", "navbar-expand"], 208 BS5Container, 209 BS5NavbarBrand(["href":"#"], "Navbar"), 210 BS5NavbarCollapse( 211 BS5NavbarNav( 212 BS5NavItem(["dropdown"], 213 BS5NavLink("navbarDropdownDark", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "role":"button", "aria-expanded":"false"], "Dropdown dark"), 214 BS5DropdownMenu(["dropdown-menu-dark"], ["aria-labelledby":"navbarDropdownDark"], 215 H5Li(BS5DropdownLink(["href":"#"], "Item 1")), 216 H5Li(BS5DropdownLink(["href":"#"], "Item 2")), 217 H5Li(BS5DropdownLink(["href":"#"], "Item 3"))))))) 218 ), 219 `BS5Navbar(["navbar-dark", "bg-dark", "navbar-expand"], 220 BS5Container, 221 BS5NavbarBrand(["href":"#"], "Navbar"), 222 BS5NavbarCollapse( 223 BS5NavbarNav( 224 BS5NavItem(["dropdown"], 225 BS5NavLink("navbarDropdownDark", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "role":"button", "aria-expanded":"false"], "Dropdown dark"), 226 BS5DropdownMenu(["dropdown-menu-dark"], ["aria-labelledby":"navbarDropdownDark"], 227 H5Li(BS5DropdownLink(["href":"#"], "Item 1")), 228 H5Li(BS5DropdownLink(["href":"#"], "Item 2")), 229 H5Li(BS5DropdownLink(["href":"#"], "Item 3")))))))`, 230 ``); 231 232 /* 233 234 `BS5Dropdown( 235 BS5DropdownToggle("dropdownDark", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown dark"), 236 BS5DropdownMenu(["aria-labelledby":"dropdownDark"], 237 BS5DropdownLink(["href":"#"], "Item 1"), 238 BS5DropdownLink(["href":"#"], "Item 2"), 239 BS5DropdownLink(["href":"#"], "Item 3"))) 240 241 --- Compact version --- 242 243 BS5Dropdown( 244 BS5DropdownToggle("dropdownDark", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown dark"), 245 BS5DropdownMenu(["aria-labelledby":"dropdownDark"], 246 .link(["href":"#"], "Item 1") 247 .link(["href":"#"], "Item 2") 248 .link(["href":"#"], "Item 3"))`, 249 `H5Div(["dropdown"] 250 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownDark" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown dark") 251 H5Div(["dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownDark"] 252 <a href="#" ["dropdown-item"]Item 1</a> 253 <a href="#" ["dropdown-item"]Item 2</a> 254 <a href="#" ["dropdown-item"]Item 3</a> 255 ) 256 ) 257 H5H5(["text-muted", "mt-3"], "In navbar component") 258 <nav ["navbar navbar-dark bg-dark navbar-expand"] 259 H5Div(["container"] 260 <a href="#" ["navbar-brand"]Navbar</a> 261 H5Div(["collapse navbar-collapse"] 262 H5Ul(["navbar-nav"] 263 H5Li(["nav-item dropdown"] 264 <a href="#" ["nav-link dropdown-toggle" id="navbarDropdownDark" data-bs-toggle="dropdown" role="button" aria-expanded="false"]Dropdown dark</a> 265 H5Ul(["dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownDark"] 266 H5Li(" 267 <a href="#" ["dropdown-item"]Item 1</a> 268 ") 269 H5Li(" 270 <a href="#" ["dropdown-item"]Item 2</a> 271 ") 272 H5Li(" 273 <a href="#" ["dropdown-item"]Item 3</a> 274 ") 275 ) 276 ") 277 ) 278 ) 279 ) 280 </nav>` 281 */ 282 283 auto directionExample = demoBs5Example("direction", "Direction", 284 H5Div( 285 BS5ButtonGroup(["dropup"], 286 BS5DropdownToggle("dropup", ["btn-secondary"], "Dropup"), 287 BS5DropdownMenu(["aria-labelledby":"dropup"], 288 BS5DropdownLink(["href":"#"], "Item 1"), 289 BS5DropdownLink(["href":"#"], "Item 2"), 290 BS5DropdownLink(["href":"#"], "Item 3"))), 291 H5Br, 292 H5Br, 293 BS5ButtonGroup(["dropstart"], 294 BS5DropdownToggle("dropstart", ["btn-secondary"], "Dropstart"), 295 BS5DropdownMenu(["aria-labelledby":"dropstart"], 296 BS5DropdownLink(["href":"#"], "Item 1"), 297 BS5DropdownLink(["href":"#"], "Item 2"), 298 BS5DropdownLink(["href":"#"], "Item 3"))), 299 H5Br, 300 H5Br, 301 BS5ButtonGroup(["dropend"], 302 BS5DropdownToggle("dropend", ["btn-secondary"], "Dropend"), 303 BS5DropdownMenu(["aria-labelledby":"dropend"], 304 BS5DropdownLink(["href":"#"], "Item 1"), 305 BS5DropdownLink(["href":"#"], "Item 2"), 306 BS5DropdownLink(["href":"#"], "Item 3"))) 307 ), 308 `BS5ButtonGroup(["dropup"], 309 BS5DropdownToggle("dropup", ["btn-secondary"], "Dropup"), 310 BS5DropdownMenu(["aria-labelledby":"dropup"], 311 BS5DropdownLink(["href":"#"], "Item 1"), 312 BS5DropdownLink(["href":"#"], "Item 2"), 313 BS5DropdownLink(["href":"#"], "Item 3"))), 314 H5Br, 315 H5Br, 316 BS5ButtonGroup(["dropstart"], 317 BS5DropdownToggle("dropstart", ["btn-secondary"], "Dropstart"), 318 BS5DropdownMenu(["aria-labelledby":"dropstart"], 319 BS5DropdownLink(["href":"#"], "Item 1"), 320 BS5DropdownLink(["href":"#"], "Item 2"), 321 BS5DropdownLink(["href":"#"], "Item 3"))), 322 H5Br, 323 H5Br, 324 BS5ButtonGroup(["dropend"], 325 BS5DropdownToggle("dropend", ["btn-secondary"], "Dropend"), 326 BS5DropdownMenu(["aria-labelledby":"dropend"], 327 BS5DropdownLink(["href":"#"], "Item 1"), 328 BS5DropdownLink(["href":"#"], "Item 2"), 329 BS5DropdownLink(["href":"#"], "Item 3")))`, 330 `H5Div(["btn-group dropup"] 331 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropup" data-bs-toggle="dropdown" aria-expanded="false"]Dropup") 332 H5Div(["dropdown-menu" aria-labelledby="dropup"] 333 <a href="#" ["dropdown-item"]Item 1</a> 334 <a href="#" ["dropdown-item"]Item 2</a> 335 <a href="#" ["dropdown-item"]Item 3</a> 336 ) 337 ) 338 H5Br,H5Br, 339 H5Div(["btn-group dropend"] 340 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropend" data-bs-toggle="dropdown" aria-expanded="false"]Dropright") 341 H5Div(["dropdown-menu" aria-labelledby="dropend"] 342 <a href="#" ["dropdown-item"]Item 1</a> 343 <a href="#" ["dropdown-item"]Item 2</a> 344 <a href="#" ["dropdown-item"]Item 3</a> 345 ) 346 ) 347 H5Br,H5Br, 348 H5Div(["btn-group dropstart"] 349 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropstart" data-bs-toggle="dropdown" aria-expanded="false"]Dropleft") 350 H5Div(["dropdown-menu" aria-labelledby="dropstart"] 351 <a href="#" ["dropdown-item"]Item 1</a> 352 <a href="#" ["dropdown-item"]Item 2</a> 353 <a href="#" ["dropdown-item"]Item 3</a> 354 ) 355 )`); 356 357 auto alignmentExample = demoBs5Example("alignment", "Alignment", 358 H5Div( 359 BS5ButtonGroup( 360 BS5DropdownToggle("dropdownEndAligned", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown right-aligned"), 361 BS5DropdownMenu(["dropdown-menu-end"], ["aria-labelledby":"dropdownEndAligned"], 362 BS5DropdownLink(["href":"#"], "Item 1"), 363 BS5DropdownLink(["href":"#"], "Item 2"), 364 BS5DropdownLink(["href":"#"], "Item 3"))) 365 ), 366 `BS5ButtonGroup( 367 BS5DropdownToggle("dropdownEndAligned", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown right-aligned"), 368 BS5DropdownMenu(["dropdown-menu-end"], ["aria-labelledby":"dropdownEndAligned"], 369 BS5DropdownLink(["href":"#"], "Item 1"), 370 BS5DropdownLink(["href":"#"], "Item 2"), 371 BS5DropdownLink(["href":"#"], "Item 3")))`, 372 `H5Div(["btn-group"] 373 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownEndAligned" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown right-aligned") 374 H5Div(["dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEndAligned"] 375 <a href="#" ["dropdown-item"]Item 1</a> 376 <a href="#" ["dropdown-item"]Item 2</a> 377 <a href="#" ["dropdown-item"]Item 3</a> 378 ) 379 )`); 380 381 auto responsiveExample = demoBs5Example("responsive", "Responsive", 382 H5Div( 383 BS5ButtonGroup( 384 BS5DropdownToggle("dropdownResponsive", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown responsive alignment"), 385 BS5DropdownMenu(["dropdown-menu-lg-end"], ["aria-labelledby":"dropdownResponsive"], 386 BS5DropdownLink(["href":"#"], "Item 1"), 387 BS5DropdownLink(["href":"#"], "Item 2"), 388 BS5DropdownLink(["href":"#"], "Item 3"))), 389 H5Br, 390 H5Br, 391 BS5ButtonGroup( 392 BS5DropdownToggle("dropdownResponsive", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown responsive alignment"), 393 BS5DropdownMenu(["dropdown-menu-end", "dropdown-menu-lg-start"], ["aria-labelledby":"dropdownResponsive"], 394 BS5DropdownLink(["href":"#"], "Item 1"), 395 BS5DropdownLink(["href":"#"], "Item 2"), 396 BS5DropdownLink(["href":"#"], "Item 3"))) 397 ), 398 `BS5ButtonGroup( 399 BS5DropdownToggle("dropdownResponsive", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown responsive alignment"), 400 BS5DropdownMenu(["dropdown-menu-lg-end"], ["aria-labelledby":"dropdownResponsive"], 401 BS5DropdownLink(["href":"#"], "Item 1"), 402 BS5DropdownLink(["href":"#"], "Item 2"), 403 BS5DropdownLink(["href":"#"], "Item 3"))), 404 H5Br, 405 H5Br, 406 BS5ButtonGroup( 407 BS5DropdownToggle("dropdownResponsive", ["btn-secondary"], ["data-bs-display":"static"], "Dropdown responsive alignment"), 408 BS5DropdownMenu(["dropdown-menu-end", "dropdown-menu-lg-start"], ["aria-labelledby":"dropdownResponsive"], 409 BS5DropdownLink(["href":"#"], "Item 1"), 410 BS5DropdownLink(["href":"#"], "Item 2"), 411 BS5DropdownLink(["href":"#"], "Item 3")))`, 412 `H5Div(["btn-group"] 413 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownEndAligned" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown right-aligned") 414 H5Div(["dropdown-menu dropdown-menu-end" aria-labelledby="dropdownEndAligned"] 415 <a href="#" ["dropdown-item"]Item 1</a> 416 <a href="#" ["dropdown-item"]Item 2</a> 417 <a href="#" ["dropdown-item"]Item 3</a> 418 ) 419 )`); 420 421 auto buttonsExample = demoBs5Example("buttons", "Button items", 422 H5Div( 423 BS5Dropdown( 424 BS5DropdownToggle("dropdownButtonItems", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 425 BS5DropdownMenu(["aria-labelledby":"dropdownButtonItems"], 426 BS5Button(["dropdown-item"], "Item 1"), 427 BS5Button(["dropdown-item"], "Item 2"), 428 BS5Button(["dropdown-item"], "Item 3"))) 429 ), 430 `BS5Dropdown( 431 BS5DropdownToggle("dropdownButtonItems", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 432 BS5DropdownMenu(["aria-labelledby":"dropdownButtonItems"], 433 BS5Button(["dropdown-item"], "Item 1"), 434 BS5Button(["dropdown-item"], "Item 2"), 435 BS5Button(["dropdown-item"], "Item 3")))`, 436 `H5Div(["dropdown"] 437 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownButtonItems" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 438 H5Div(["dropdown-menu" aria-labelledby="dropdownButtonItems"] 439 H5Button(["type":"button" ["dropdown-item"]First button") 440 H5Button(["type":"button" ["dropdown-item"]Second button") 441 H5Button(["type":"button" ["dropdown-item"]Third button") 442 ) 443 )`); 444 445 auto activeExample = demoBs5Example("active", "Active item", 446 H5Div( 447 BS5Dropdown( 448 BS5DropdownToggle("dropdownActive", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 449 BS5DropdownMenu(["aria-labelledby":"dropdownActive"], 450 BS5DropdownLink(["dropdown-item", "active"], ["href":"#"], "Item 1"), 451 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 452 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3"))) 453 ), 454 `BS5Dropdown( 455 BS5DropdownToggle("dropdownActive", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 456 BS5DropdownMenu(["aria-labelledby":"dropdownActive"], 457 BS5DropdownLink(["dropdown-item", "active"], ["href":"#"], "Item 1"), 458 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 459 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3")))`, 460 `H5Div(["dropdown"] 461 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownActive" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 462 H5Div(["dropdown-menu" aria-labelledby="dropdownActive"] 463 <a href="#" ["dropdown-item active"]Item 1</a> 464 <a href="#" ["dropdown-item"]Item 2</a> 465 <a href="#" ["dropdown-item"]Item 3</a> 466 ) 467 )`); 468 469 auto disabledExample = demoBs5Example("disabled", "Disabled item", 470 H5Div( 471 BS5Dropdown( 472 BS5DropdownToggle("dropdownDisabled", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 473 BS5DropdownMenu(["aria-labelledby":"dropdownDisabled"], 474 BS5DropdownLink(["dropdown-item", "disabled"], ["href":"#"], "Item 1"), 475 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 476 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3"))) 477 ), 478 `BS5Dropdown( 479 BS5DropdownToggle("dropdownDisabled", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 480 BS5DropdownMenu(["aria-labelledby":"dropdownDisabled"], 481 BS5DropdownLink(["dropdown-item", "disabled"], ["href":"#"], "Item 1"), 482 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 483 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3")))`, 484 `H5Div(["dropdown"] 485 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownDisabled" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 486 H5Div(["dropdown-menu" aria-labelledby="dropdownDisabled"] 487 <a href="#" ["dropdown-item disabled"]Item 1</a> 488 <a href="#" ["dropdown-item"]Item 2</a> 489 <a href="#" ["dropdown-item"]Item 3</a> 490 ) 491 )`); 492 493 auto headerExample = demoBs5Example("header", "Header", 494 H5Div( 495 BS5Dropdown( 496 BS5DropdownToggle("dropdownHeader", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 497 BS5DropdownMenu(["aria-labelledby":"dropdownHeader"], 498 BS5DropdownHeader("Dropdown header"), 499 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 1"), 500 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 501 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3"))) 502 ), `BS5Dropdown( 503 BS5DropdownToggle("dropdownHeader", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 504 BS5DropdownMenu(["aria-labelledby":"dropdownHeader"], 505 BS5DropdownHeader("Dropdown header"), 506 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 1"), 507 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 508 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3")))`, 509 `H5Div(["dropdown"] 510 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownHeader" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 511 H5Div(["dropdown-menu" aria-labelledby="dropdownHeader"] 512 <h6 ["dropdown-header"]Dropdown header</h6> 513 <a href="#" ["dropdown-item"]Item 1</a> 514 <a href="#" ["dropdown-item"]Item 2</a> 515 <a href="#" ["dropdown-item"]Item 3</a> 516 ) 517 )`); 518 519 auto dividerExample = demoBs5Example("divider", "Divider", 520 H5Div( 521 BS5Dropdown( 522 BS5DropdownToggle("dropdownDivider", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 523 BS5DropdownMenu(["aria-labelledby":"dropdownDivider"], 524 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 1"), 525 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 526 BS5DropdownDivider, 527 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3"))) 528 ), 529 `BS5Dropdown( 530 BS5DropdownToggle("dropdownDivider", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 531 BS5DropdownMenu(["aria-labelledby":"dropdownDivider"], 532 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 1"), 533 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 534 BS5DropdownDivider, 535 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3")))`, 536 `H5Div(["dropdown"] 537 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownDivider" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 538 H5Div(["dropdown-menu" aria-labelledby="dropdownDivider"] 539 <a href="#" ["dropdown-item"]Item 1</a> 540 <a href="#" ["dropdown-item"]Item 2</a> 541 H5Div(["dropdown-divider"]) 542 <a href="#" ["dropdown-item"]Item 3</a> 543 ) 544 )`); 545 546 auto textExample = demoBs5Example("text", "Text item", 547 H5Div( 548 BS5Dropdown( 549 BS5DropdownToggle("dropdownText", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 550 BS5DropdownMenu(["aria-labelledby":"dropdownText"], 551 H5Span(["dropdown-item-text"], "Dropdown text item"), 552 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 553 BS5DropdownDivider, 554 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3"))) 555 ), 556 `BS5Dropdown( 557 BS5DropdownToggle("dropdownText", ["btn-secondary"], ["data-bs-toggle":"dropdown"], "Dropdown button"), 558 BS5DropdownMenu(["aria-labelledby":"dropdownText"], 559 H5Span(["dropdown-item-text"], "Dropdown text item"), 560 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 2"), 561 BS5DropdownDivider, 562 BS5DropdownLink(["dropdown-item"], ["href":"#"], "Item 3")))`, 563 `H5Div(["dropdown"] 564 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle" id="dropdownText" data-bs-toggle="dropdown" aria-expanded="false"]Dropdown button") 565 H5Div(["dropdown-menu" aria-labelledby="dropdownText"] 566 H5Span(["dropdown-item-text"]Dropdown text item") 567 <a href="#" ["dropdown-item"]Item 2</a> 568 <a href="#" ["dropdown-item"]Item 3</a> 569 ) 570 )`); 571 572 auto referenceExample = demoBs5Example("reference", "Reference", 573 H5Div( 574 BS5ButtonGroup( 575 BS5Button(["btn-secondary"], "Dropdown split button"), 576 BS5DropdownToggle("dropdownReference", ["btn-secondary", "dropdown-toggle-split"], ["data-bs-toggle":"dropdown", "data-bs-reference":"parent"], H5Span(["visually-hidden"],"Toggle dropdown")), 577 BS5DropdownMenu(["aria-labelledby":"dropdownReference"], 578 BS5DropdownLink(["href":"#"], "Item 1"), 579 BS5DropdownLink(["href":"#"], "Item 2"), 580 BS5DropdownLink(["href":"#"], "Item 3"))) 581 ), 582 `BS5ButtonGroup( 583 BS5Button(["btn-secondary"], "Dropdown split button"), 584 BS5DropdownToggle("dropdownReference", ["btn-secondary", "dropdown-toggle-split"], ["data-bs-toggle":"dropdown", "data-bs-reference":"parent"], H5Span(["visually-hidden"],"Toggle dropdown")), 585 BS5DropdownMenu(["aria-labelledby":"dropdownReference"], 586 BS5DropdownLink(["href":"#"], "Item 1"), 587 BS5DropdownLink(["href":"#"], "Item 2"), 588 BS5DropdownLink(["href":"#"], "Item 3")))`, 589 `H5Div(["btn-group"] 590 H5Button(["type":"button" ["btn btn-secondary"]Dropdown split button") 591 H5Button(["type":"button" ["btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"]H5Span(["visually-hidden"]Toggle dropdown")") 592 H5Div(["dropdown-menu" aria-labelledby="dropdownReference"] 593 <a href="#" ["dropdown-item"]Item 1</a> 594 <a href="#" ["dropdown-item"]Item 2</a> 595 <a href="#" ["dropdown-item"]Item 3</a> 596 ) 597 )`); 598 599 return 600 H5Main(["style":"margin-top:70px;"], 601 H5Div(["container-fluid", "mt-3", "bg-light"], 602 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 603 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Dropdowns")), 604 BS5Container(["mt-3"]).row( 605 H5Div(["col-12", "col-lg-2"], 606 listLevels("basic"), 607 listAreas("basic", "components"), 608 listSections("basic", "components", "dropdowns")), 609 H5Div(["col-12", "col-lg-8"], 610 dateInfo(this), 611 H5H2(["display-4"], "Dropdowns"), 612 H5Hr, 613 614 buttonExample, 615 linkExample, 616 splitExample, 617 sizingExample, 618 darkExample, 619 navbarExample, 620 directionExample, 621 alignmentExample, 622 responsiveExample, 623 buttonsExample, 624 activeExample, 625 disabledExample, 626 headerExample, 627 dividerExample, 628 textExample, 629 referenceExample 630 631 ))).toString; 632 } 633 }); 634 }