1 module uim.bootstrap.bs5.demos.components.navbars; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/navbars", 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": "Navbars - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 auto linkExample = demoBs5Example("link", "With Link", 19 BS5Navbar(["navbar-light", "bg-light"], 20 BS5Container( 21 BS5NavbarBrand(["href":"#"], "Navbar")) 22 ), `BS5Navbar(["navbar-light", "bg-light"], 23 BS5Container( 24 BS5NavbarBrand(["href":"#"], "Navbar"))`, ``); 25 26 auto headingExample = demoBs5Example("heading", "With Heading", 27 BS5Navbar(["navbar-light", "bg-light"], 28 BS5Container( 29 BS5NavbarBrand(["h1", "mb-0"], ["href":"#"], "Navbar"))), 30 `BS5Navbar(["navbar-light", "bg-light"], 31 BS5Container( 32 BS5NavbarBrand(["h1", "mb-0"], ["href":"#"], "Navbar")))`, ``); 33 34 auto imageExample = demoBs5Example("image", "With Image", 35 BS5Navbar(["navbar-light", "bg-light"], 36 BS5Container( 37 BS5NavbarBrand(["href":"#"], 38 H5Img(["src":"/img/50x50.png", "alt":""])))), 39 `BS5Navbar(["navbar-light", "bg-light"], 40 BS5Container( 41 BS5NavbarBrand(["href":"#"], 42 H5Img(["src":"/img/50x50.png", "alt":""]))))`, ``); 43 44 auto imageTextExample = demoBs5Example("image", "With Image and Text", 45 BS5Navbar(["navbar-light", "bg-light"], 46 BS5Container( 47 BS5NavbarBrand(["href":"#"], 48 H5Img(["src":"/img/50x50.png", "alt":""]), 49 H5Span(["align-middle"], "Navbar")))), 50 `BS5Navbar(["navbar-light", "bg-light"], 51 BS5Container( 52 BS5NavbarBrand(["href":"#"], 53 H5Img(["src":"/img/50x50.png", "alt":""]), 54 H5Span(["align-middle"], "Navbar"))))`, ``); 55 56 auto ulistTextExample = demoBs5Example("ulist", "With Unordered list", 57 BS5Navbar(["navbar-light", "bg-light", "navbar-expand"], 58 BS5Container( 59 BS5NavbarBrand(["href":"#"]), 60 BS5NavbarCollapse( 61 BS5NavbarNav( 62 BS5NavItem( 63 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 64 BS5NavItem( 65 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 66 BS5NavItem( 67 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 68 BS5NavItem( 69 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 70 `BS5Navbar(["navbar-light", "bg-light", "navbar-expand"], 71 BS5Container( 72 BS5NavbarBrand(["href":"#"]), 73 BS5NavbarCollapse( 74 BS5NavbarNav( 75 BS5NavItem( 76 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 77 BS5NavItem( 78 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 79 BS5NavItem( 80 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 81 BS5NavItem( 82 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link"))))))`, ``); 83 84 auto formsExample = demoBs5Example("forms", "Navbar with Form", 85 BS5Navbar(["navbar-light", "bg-light"], 86 BS5Container( 87 BS5NavbarBrand(["href":"#"], "Navbar"), 88 H5Form( 89 BS5InputGroup( 90 BS5InputSearch(["placeholder":"Search text here", "aria-label":"Search input"], 91 H5Button(["btn", "btn-secondary"], ["type":"submit"], "Search")))))), 92 `BS5Navbar(["navbar-light", "bg-light"], 93 BS5Container( 94 BS5NavbarBrand(["href":"#"], "Navbar"), 95 H5Form( 96 BS5InputGroup( 97 BS5InputSearch(["placeholder":"Search text here", "aria-label":"Search input"], 98 H5Button(["btn", "btn-secondary"], ["type":"submit"], "Search"))))))`, ``); 99 100 auto textExample = demoBs5Example("text", "Navbar with text", 101 BS5Navbar(["navbar-light", "bg-light"], 102 BS5Container( 103 H5Div(["navbar-text"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit."))), 104 `BS5Navbar(["navbar-light", "bg-light"], 105 BS5Container( 106 H5Div(["navbar-text"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit.")))`, ``); 107 108 auto colorsExample = demoBs5Example("colors", "Navbar colors", 109 H5Div( 110 H5H5(["text-muted", "mt-3"], "Dark navbar"), 111 BS5Navbar(["navbar-dark", "bg-primary"], 112 BS5Container( 113 BS5NavbarBrand(["href":"#"], "Primary"))), 114 BS5Navbar(["navbar-dark", "bg-secondary"], 115 BS5Container( 116 BS5NavbarBrand(["href":"#"], "Secondary"))), 117 BS5Navbar(["navbar-dark", "bg-success"], 118 BS5Container( 119 BS5NavbarBrand(["href":"#"], "Success"))), 120 BS5Navbar(["navbar-dark", "bg-danger"], 121 BS5Container( 122 BS5NavbarBrand(["href":"#"], "Danger"))), 123 BS5Navbar(["navbar-dark", "bg-warning"], 124 BS5Container( 125 BS5NavbarBrand(["href":"#"], "Warning"))), 126 BS5Navbar(["navbar-dark", "bg-info"], 127 BS5Container( 128 BS5NavbarBrand(["href":"#"], "Info"))), 129 BS5Navbar(["navbar-dark", "bg-dark"], 130 BS5Container( 131 BS5NavbarBrand(["href":"#"], "Dark"))), 132 H5H5(["text-muted", "mt-3"], "Light navbar"), 133 BS5Navbar(["navbar-light", "bg-light"], 134 BS5Container( 135 BS5NavbarBrand(["href":"#"], "Light"))), 136 BS5Navbar(["navbar-light", "bg-white"], 137 BS5Container( 138 BS5NavbarBrand(["href":"#"], "White"))), 139 BS5Navbar(["navbar-light", "bg-transparent"], 140 BS5Container( 141 BS5NavbarBrand(["href":"#"], "Transparent")))), 142 `BS5Navbar(["navbar-dark", "bg-primary"], 143 BS5Container( 144 BS5NavbarBrand(["href":"#"], "Primary"))), 145 BS5Navbar(["navbar-dark", "bg-secondary"], 146 BS5Container( 147 BS5NavbarBrand(["href":"#"], "Secondary"))), 148 BS5Navbar(["navbar-dark", "bg-success"], 149 BS5Container( 150 BS5NavbarBrand(["href":"#"], "Success"))), 151 BS5Navbar(["navbar-dark", "bg-danger"], 152 BS5Container( 153 BS5NavbarBrand(["href":"#"], "Danger"))), 154 BS5Navbar(["navbar-dark", "bg-warning"], 155 BS5Container( 156 BS5NavbarBrand(["href":"#"], "Warning"))), 157 BS5Navbar(["navbar-dark", "bg-info"], 158 BS5Container( 159 BS5NavbarBrand(["href":"#"], "Info"))), 160 BS5Navbar(["navbar-dark", "bg-dark"], 161 BS5Container( 162 BS5NavbarBrand(["href":"#"], "Dark"))), 163 BS5Navbar(["navbar-light", "bg-light"], 164 BS5Container( 165 BS5NavbarBrand(["href":"#"], "Light"))), 166 BS5Navbar(["navbar-light", "bg-white"], 167 BS5Container( 168 BS5NavbarBrand(["href":"#"], "White"))), 169 BS5Navbar(["navbar-light", "bg-transparent"], 170 BS5Container( 171 BS5NavbarBrand(["href":"#"], "Transparent"))))`, ``); 172 173 auto togglerExample = demoBs5Example("toggler", "Navbar with toggler", 174 H5Div( 175 H5H5(["text-muted", "mt-3"], "Left-aligned toggler"), 176 BS5Navbar(["navbar-light", "bg-light navbar-expand-lg"], 177 BS5Container( 178 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveLeft", "aria-controls":"navbarResponsiveLeft", "aria-expanded":"false", "aria-label":"Toggle navigation"], 179 H5Span(["navbar-toggler-icon"])), 180 BS5NavbarBrand(["href":"#"], "Navbar"), 181 BS5NavbarCollapse("navbarResponsiveLeft", 182 BS5Navbar( 183 BS5NavItem( 184 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 185 BS5NavItem( 186 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 187 BS5NavItem( 188 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 189 BS5NavItem( 190 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 191 H5H5(["text-muted", "mt-3"], "Right-aligned toggler"), 192 BS5Navbar(["navbar-light", "bg-light navbar-expand-lg"], 193 BS5Container( 194 BS5NavbarBrand(["href":"#"], "Navbar"), 195 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveRight", 196 "aria-controls":"navbarResponsiveRight", "aria-expanded":"false", "aria-label":"Toggle navigation"], 197 H5Span(["navbar-toggler-icon"])), 198 BS5NavbarCollapse("navbarResponsiveRight", 199 BS5Navbar( 200 BS5NavItem( 201 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 202 BS5NavItem( 203 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 204 BS5NavItem( 205 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 206 BS5NavItem( 207 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link"))) 208 )))), ``, ``); 209 210 auto responsiveExample = demoBs5Example("responsive", "Responsive", 211 H5Div( 212 H5H5(["text-muted", "mt-3"], "Small"), 213 BS5Navbar(["navbar-light", "bg-light navbar-expand-sm"], 214 BS5Container( 215 BS5NavbarBrand(["href":"#"], "Navbar"), 216 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveSmall", 217 "aria-controls":"navbarResponsiveSmall", "aria-expanded":"false", "aria-label":"Toggle navigation"], 218 H5Span(["navbar-toggler-icon"])), 219 BS5NavbarCollapse("navbarResponsiveSmall", 220 BS5Navbar( 221 BS5NavItem( 222 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 223 BS5NavItem( 224 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 225 BS5NavItem( 226 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 227 BS5NavItem( 228 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 229 230 H5H5(["text-muted", "mt-3"], "Medium"), 231 BS5Navbar(["navbar-light", "bg-light navbar-expand-md"], 232 BS5Container( 233 BS5NavbarBrand(["href":"#"], "Navbar"), 234 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveMedium", 235 "aria-controls":"navbarResponsiveMedium", "aria-expanded":"false", "aria-label":"Toggle navigation"], 236 H5Span(["navbar-toggler-icon"])), 237 BS5NavbarCollapse("navbarResponsiveMedium", 238 BS5Navbar( 239 BS5NavItem( 240 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 241 BS5NavItem( 242 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 243 BS5NavItem( 244 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 245 BS5NavItem( 246 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 247 248 H5H5(["text-muted", "mt-3"], "Large"), 249 BS5Navbar(["navbar-light", "bg-light navbar-expand-lg"], 250 BS5Container( 251 BS5NavbarBrand(["href":"#"], "Navbar"), 252 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveLarge", 253 "aria-controls":"navbarResponsiveLarge", "aria-expanded":"false", "aria-label":"Toggle navigation"], 254 H5Span(["navbar-toggler-icon"])), 255 BS5NavbarCollapse("navbarResponsiveLarge", 256 BS5Navbar( 257 BS5NavItem( 258 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 259 BS5NavItem( 260 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 261 BS5NavItem( 262 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 263 BS5NavItem( 264 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 265 266 H5H5(["text-muted", "mt-3"], "Extra Large"), 267 BS5Navbar(["navbar-light", "bg-light navbar-expand-xl"], 268 BS5Container( 269 BS5NavbarBrand(["href":"#"], "Navbar"), 270 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveExtraLarge", 271 "aria-controls":"navbarResponsiveExtraLarge", "aria-expanded":"false", "aria-label":"Toggle navigation"], 272 H5Span(["navbar-toggler-icon"])), 273 BS5NavbarCollapse("navbarResponsiveExtraLarge", 274 BS5Navbar( 275 BS5NavItem( 276 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 277 BS5NavItem( 278 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 279 BS5NavItem( 280 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 281 BS5NavItem( 282 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))), 283 284 H5H5(["text-muted", "mt-3"], "Extra extra large"), 285 BS5Navbar(["navbar-light", "bg-light navbar-expand-xxl"], 286 BS5Container( 287 BS5NavbarBrand(["href":"#"], "Navbar"), 288 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarResponsiveExtraExtraLarge", 289 "aria-controls":"navbarResponsiveExtraExtraLarge", "aria-expanded":"false", "aria-label":"Toggle navigation"], 290 H5Span(["navbar-toggler-icon"])), 291 BS5NavbarCollapse("navbarResponsiveExtraExtraLarge", 292 BS5Navbar( 293 BS5NavItem( 294 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 295 BS5NavItem( 296 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 297 BS5NavItem( 298 BS5NavLink(["href":"#", "aria-current":"page"], "Link")), 299 BS5NavItem( 300 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Link")))))) 301 ), ``, ``); 302 303 auto externalExample = demoBs5Example("external", "External content", 304 H5Div( 305 BS5Collapse("navbarExternalContent", 306 H5Div(["p-4"], 307 H5H5("Collapsed content"), 308 H5P(["mb-0"], "Toggleable via the navbar toggler.") 309 )), 310 BS5Navbar(["navbar-light", "bg-light"], 311 BS5Container( 312 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarExternalContent", 313 "aria-controls":"navbarExternalContent", "aria-expanded":"false", "aria-label":"Toggle navigation"], 314 H5Span(["navbar-toggler-icon"])))) 315 ), 316 `BS5Collapse("navbarExternalContent", 317 H5Div(["p-4"], 318 H5H5("Collapsed content"), 319 H5P(["mb-0"], "Toggleable via the navbar toggler.") 320 )), 321 BS5Navbar(["navbar-light", "bg-light"], 322 BS5Container( 323 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarExternalContent", 324 "aria-controls":"navbarExternalContent", "aria-expanded":"false", "aria-label":"Toggle navigation"], 325 H5Span(["navbar-toggler-icon"]))))`, ``); 326 327 auto advancedExample = demoBs5Example("advanced", "Advanced example", 328 H5Div( 329 BS5Navbar(["navbar-light", "bg-light navbar-expand-lg"], 330 BS5Container( 331 BS5NavbarBrand(["href":"#"], "Navbar"), 332 BS5Button(["navbar-toggler"], ["data-bs-toggle":"collapse", "data-bs-target":"#navbarAdvanced", 333 "aria-controls":"navbarAdvanced", "aria-expanded":"false", "aria-label":"Toggle navigation"], 334 H5Span(["navbar-toggler-icon"])), 335 BS5NavbarCollapse("navbarAdvanced", 336 BS5NavbarNav(["mb-2", "mb-lg-0", "me-auto"], 337 BS5NavItem( 338 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 339 BS5NavItem(["dropdown"], 340 BS5NavLink("navbarAdvancedDropdown", ["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", 341 "role":"button", "aria-expanded":"false"], "Dropdown"), 342 BS5DropdownMenu(["aria-labelledby":"navbarAdvancedDropdown"], 343 H5Li( 344 BS5DropdownItem(["href":"#"], "First item")), 345 H5Li( 346 BS5DropdownItem(["href":"#"], "Second item")), 347 H5Li( 348 BS5DropdownItem(["href":"#"], "Third item")) 349 )), 350 BS5NavItem( 351 BS5NavLink(["href":"#"], "Link")), 352 BS5NavItem( 353 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), 354 H5Form( 355 BS5InputGroup( 356 BS5InputSearch(["placeholder":"Search text here", "aria-label":"Search input"]), 357 H5Button(["btn btn-secondary"], ["type":"submit"], "Search"))) 358 )))), ``, ``); 359 360 return 361 H5Main(["style":"margin-top:70px;"], 362 H5Div(["container-fluid", "mt-3", "bg-light"], 363 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 364 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Navbars")), 365 BS5Container(["mt-3"]).row( 366 H5Div(["col-12", "col-lg-2"], 367 listLevels("basic"), 368 listAreas("basic", "components"), 369 listSections("basic", "components", "navbars")), 370 H5Div(["col-12", "col-lg-8"], 371 dateInfo(this), 372 dateInfo(this), 373 H5H2(["display-4"], "Navbars"), 374 H5Hr, 375 376 linkExample, 377 headingExample, 378 imageExample, 379 imageTextExample, 380 ulistTextExample, 381 // linksExample, 382 formsExample, 383 textExample, 384 colorsExample, 385 togglerExample, 386 responsiveExample, 387 advancedExample 388 389 ), 390 H5Div(["col-12", "col-lg-2"]))).toString; 391 } 392 }); 393 }