1 module uim.bootstrap.bs5.demos.components.navs; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/navs", 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": "Navs - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto unorderedExample = demoBs5Example("unordered", "Unordered list", 20 H5Div( 21 BS5Nav( 22 BS5NavItem( 23 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 24 BS5NavItem( 25 BS5NavLink(["href":"#"], "Link")), 26 BS5NavItem( 27 BS5NavLink(["href":"#"], "Link")), 28 BS5NavItem( 29 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 30 ), `BS5Nav( 31 BS5NavItem( 32 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 33 BS5NavItem( 34 BS5NavLink(["href":"#"], "Link")), 35 BS5NavItem( 36 BS5NavLink(["href":"#"], "Link")), 37 BS5NavItem( 38 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 39 40 auto linksExample = demoBs5Example("links", "Links", 41 H5Div( 42 BS5Nav(["nav"], 43 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active"), 44 BS5NavLink(["href":"#"],"Link"), 45 BS5NavLink(["href":"#"], "Link"), 46 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")) 47 ), `BS5Nav(["nav"], 48 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active"), 49 BS5NavLink(["href":"#"],"Link"), 50 BS5NavLink(["href":"#"], "Link"), 51 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))`, ``); 52 53 auto barExample = demoBs5Example("bar", "Navs as navigation bar", 54 H5Div( 55 H5Nav( 56 BS5Nav( 57 BS5NavItem( 58 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 59 BS5NavItem( 60 BS5NavLink(["href":"#"], "Link")), 61 BS5NavItem( 62 BS5NavLink(["href":"#"], "Link")), 63 BS5NavItem( 64 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))) 65 ), `H5Nav( 66 BS5Nav( 67 BS5NavItem( 68 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 69 BS5NavItem( 70 BS5NavLink(["href":"#"], "Link")), 71 BS5NavItem( 72 BS5NavLink(["href":"#"], "Link")), 73 BS5NavItem( 74 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))))`, ``); 75 76 auto horizontalExample = demoBs5Example("horizontal", "Horizontal alignment", 77 H5Div( 78 H5H5(["text-muted", "mt-3"], "Centered"), 79 BS5Nav(["justify-content-center"], 80 BS5NavItem( 81 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 82 BS5NavItem( 83 BS5NavLink(["href":"#"], "Link")), 84 BS5NavItem( 85 BS5NavLink(["href":"#"], "Link")), 86 BS5NavItem( 87 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), 88 H5H5(["text-muted", "mt-3"], "Right-aligned"), 89 BS5Nav(["justify-content-end"], 90 BS5NavItem( 91 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 92 BS5NavItem( 93 BS5NavLink(["href":"#"], "Link")), 94 BS5NavItem( 95 BS5NavLink(["href":"#"], "Link")), 96 BS5NavItem( 97 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 98 ), `BS5Nav(["justify-content-center"], 99 BS5NavItem( 100 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 101 BS5NavItem( 102 BS5NavLink(["href":"#"], "Link")), 103 BS5NavItem( 104 BS5NavLink(["href":"#"], "Link")), 105 BS5NavItem( 106 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), 107 108 BS5Nav(["justify-content-end"], 109 BS5NavItem( 110 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 111 BS5NavItem( 112 BS5NavLink(["href":"#"], "Link")), 113 BS5NavItem( 114 BS5NavLink(["href":"#"], "Link")), 115 BS5NavItem( 116 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 117 118 auto verticalExample = demoBs5Example("vertical", "Vertical", 119 H5Div( 120 BS5Nav(["flex-column"], 121 BS5NavItem( 122 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 123 BS5NavItem( 124 BS5NavLink(["href":"#"], "Link")), 125 BS5NavItem( 126 BS5NavLink(["href":"#"], "Link")), 127 BS5NavItem( 128 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 129 ), `BS5Nav(["flex-column"], 130 BS5NavItem( 131 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 132 BS5NavItem( 133 BS5NavLink(["href":"#"], "Link")), 134 BS5NavItem( 135 BS5NavLink(["href":"#"], "Link")), 136 BS5NavItem( 137 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 138 139 auto tabsExample = demoBs5Example("tabs", "Tabs", 140 H5Div( 141 BS5Nav(["nav-tabs"], 142 BS5NavItem( 143 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 144 BS5NavItem( 145 BS5NavLink(["href":"#"], "Link")), 146 BS5NavItem( 147 BS5NavLink(["href":"#"], "Link")), 148 BS5NavItem( 149 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 150 ), `BS5Nav(["nav-tabs"], 151 BS5NavItem( 152 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 153 BS5NavItem( 154 BS5NavLink(["href":"#"], "Link")), 155 BS5NavItem( 156 BS5NavLink(["href":"#"], "Link")), 157 BS5NavItem( 158 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 159 160 auto pillsExample = demoBs5Example("pills", "Pills", 161 H5Div( 162 BS5Nav(["nav-pills"], 163 BS5NavItem( 164 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 165 BS5NavItem( 166 BS5NavLink(["href":"#"], "Link")), 167 BS5NavItem( 168 BS5NavLink(["href":"#"], "Link")), 169 BS5NavItem( 170 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 171 ), `BS5Nav(["nav-pills"], 172 BS5NavItem( 173 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 174 BS5NavItem( 175 BS5NavLink(["href":"#"], "Link")), 176 BS5NavItem( 177 BS5NavLink(["href":"#"], "Link")), 178 BS5NavItem( 179 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 180 181 auto fillExample = demoBs5Example("fill", "Fill", 182 H5Div( 183 H5H5(["text-muted", "mt-3"], "Unordered list"), 184 BS5Nav(["nav-tabs", "nav-fill"], 185 BS5NavItem( 186 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 187 BS5NavItem( 188 BS5NavLink(["href":"#"], "Link")), 189 BS5NavItem( 190 BS5NavLink(["href":"#"], "Link")), 191 BS5NavItem( 192 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), H5Br, 193 H5Nav(["nav", "nav-tabs", "nav-fill"], 194 BS5NavLink(["nav-item", "active"], ["href":"#", "aria-current":"page"], "Active"), 195 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 196 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 197 BS5NavLink(["nav-item", "disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")) 198 ), `BS5Nav(["nav-tabs", "nav-fill"], 199 BS5NavItem( 200 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 201 BS5NavItem( 202 BS5NavLink(["href":"#"], "Link")), 203 BS5NavItem( 204 BS5NavLink(["href":"#"], "Link")), 205 BS5NavItem( 206 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), H5Br, 207 H5Nav(["nav", "nav-tabs", "nav-fill"], 208 BS5NavLink(["nav-item", "active"], ["href":"#", "aria-current":"page"], "Active"), 209 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 210 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 211 BS5NavLink(["nav-item", "disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))`, ``); 212 213 auto justifyExample = demoBs5Example("justify", "Justify", 214 H5Div( 215 H5H5(["text-muted", "mt-3"], "Unordered list"), 216 BS5Nav(["nav-pills", "nav-justified"], 217 BS5NavItem( 218 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 219 BS5NavItem( 220 BS5NavLink(["href":"#"], "Link")), 221 BS5NavItem( 222 BS5NavLink(["href":"#"], "Link")), 223 BS5NavItem( 224 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), H5Br, 225 H5Nav(["nav", "nav-pills", "nav-justified"], 226 BS5NavLink(["nav-item", "active"], ["href":"#", "aria-current":"page"], "Active"), 227 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 228 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 229 BS5NavLink(["nav-item", "disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")) 230 ), `BS5Nav(["nav-pills", "nav-justified"], 231 BS5NavItem( 232 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 233 BS5NavItem( 234 BS5NavLink(["href":"#"], "Link")), 235 BS5NavItem( 236 BS5NavLink(["href":"#"], "Link")), 237 BS5NavItem( 238 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))), H5Br, 239 H5Nav(["nav", "nav-pills", "nav-justified"], 240 BS5NavLink(["nav-item", "active"], ["href":"#", "aria-current":"page"], "Active"), 241 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 242 BS5NavLink(["nav-item"], ["href":"#"], "Link"), 243 BS5NavLink(["nav-item", "disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))`, ``); 244 245 246 auto responsiveExample = demoBs5Example("responsive", "Responsive", 247 H5Div( 248 BS5Nav(["flex-column", "flex-md-row"], 249 BS5NavItem( 250 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 251 BS5NavItem( 252 BS5NavLink(["href":"#"], "Link")), 253 BS5NavItem( 254 BS5NavLink(["href":"#"], "Link")), 255 BS5NavItem( 256 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 257 ), `BS5Nav(["flex-column", "flex-md-row"], 258 BS5NavItem( 259 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 260 BS5NavItem( 261 BS5NavLink(["href":"#"], "Link")), 262 BS5NavItem( 263 BS5NavLink(["href":"#"], "Link")), 264 BS5NavItem( 265 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 266 267 auto dropdownExample = demoBs5Example("dropdown", "Dropdown", 268 H5Div( 269 BS5Nav( 270 BS5NavItem( 271 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 272 BS5NavItem(["dropdown"], 273 BS5NavLink(["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "role":"button", "aria-expanded":"false"], "Dropdown"), 274 BS5DropdownMenu( 275 BS5DropdownItem(["href":"#"], "First item"), 276 BS5DropdownItem(["href":"#"], "Second item"), 277 BS5DropdownItem(["href":"#"], "Third item") 278 )), 279 BS5NavItem( 280 BS5NavLink(["href":"#"], "Link")), 281 BS5NavItem( 282 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled"))) 283 ), `BS5Nav( 284 BS5NavItem( 285 BS5NavLink(["active"], ["href":"#", "aria-current":"page"], "Active")), 286 BS5NavItem(["dropdown"], 287 BS5NavLink(["dropdown-toggle"], ["href":"#", "data-bs-toggle":"dropdown", "role":"button", "aria-expanded":"false"], "Dropdown"), 288 BS5DropdownMenu( 289 BS5DropdownItem(["href":"#"], "First item"), 290 BS5DropdownItem(["href":"#"], "Second item"), 291 BS5DropdownItem(["href":"#"], "Third item") 292 )), 293 BS5NavItem( 294 BS5NavLink(["href":"#"], "Link")), 295 BS5NavItem( 296 BS5NavLink(["disabled"], ["href":"#", "tabindex":"-1", "aria-disabled":"true"], "Disabled")))`, ``); 297 298 auto tabpanelExample = demoBs5Example("tabpanel", "Tab panel from list", 299 H5Div( 300 BS5Nav(["nav-tabs"], ["role":"tablist"], 301 BS5NavItem(["role":"presentation"], 302 BS5NavLink("tabList-1", ["active"], ["href":"#tabList-pane-1", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabList-pane-1", "aria-selected":"true"], "Panel 1")), 303 BS5NavItem(["role":"presentation"], 304 BS5NavLink("tabList-2", ["href":"#tabList-pane-2", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabList-pane-2", "aria-selected":"false"], "Panel 2")), 305 BS5NavItem(["role":"presentation"], 306 BS5NavLink("tabList-3", ["href":"#tabList-pane-3", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabList-pane-3", "aria-selected":"false"], "Panel 3"))), 307 H5Div(["tab-content"], 308 H5Div("tabList-pane-1", ["tab-pane", "active"], ["role":"tabpanel", "aria-labelledby":"tabList-1"], 309 H5P("Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 310 H5Div("tabList-pane-2", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabList-2"], 311 H5P("Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 312 H5Div("tabList-pane-3", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabList-3"], 313 H5P("Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."))) 314 ), ``, ``); 315 316 auto tablinksExample = demoBs5Example("tablinks", "Tab panel from links", 317 H5Div( 318 H5Nav( 319 H5Div(["nav", "nav-tabs"], ["role":"tablist"], 320 BS5NavLink("tabLinks-1", ["nav-item active"], ["href":"#tabLinks-pane-1", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabLinks-pane-1", "aria-selected":"true"], "Panel 1"), 321 BS5NavLink("tabLinks-2", ["nav-item"], ["href":"#tabLinks-pane-2", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabLinks-pane-2", "aria-selected":"false"], "Panel 2"), 322 BS5NavLink("tabLinks-3", ["nav-item"], ["href":"#tabLinks-pane-3", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabLinks-pane-3", "aria-selected":"false"], "Panel 3"))), 323 H5Div(["tab-content"], 324 H5Div("tabLinks-pane-1", ["tab-pane", "active"], ["role":"tabpanel", "aria-labelledby":"tabLinks-1"], 325 H5P("Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 326 H5Div("tabLinks-pane-2", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabLinks-2"], 327 H5P("Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 328 H5Div("tabLinks-pane-3", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabLinks-3"], 329 H5P("Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."))) 330 ), ``, ``); 331 332 auto verticalpanelExample = demoBs5Example("verticalpanel", "Vertical tab panel", 333 H5Div( 334 BS5Row( 335 H5Div(["col-3"], 336 BS5Nav(["flex-column", "nav-pills"], ["role":"tablist"], 337 BS5NavItem(["role":"presentation"], 338 BS5NavLink("tabVertical-1", ["active"], ["href":"#tabVertical-pane-1", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabVertical-pane-1", "aria-selected":"true"], "Panel 1")), 339 BS5NavItem(["role":"presentation"], 340 BS5NavLink("tabVertical-2", ["href":"#tabVertical-pane-2", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabVertical-pane-2", "aria-selected":"false"], "Panel 2")), 341 BS5NavItem(["role":"presentation"], 342 BS5NavLink("tabVertical-3", ["href":"#tabVertical-pane-3", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabVertical-pane-3", "aria-selected":"false"], "Panel 3")))), 343 H5Div(["col-9"], 344 H5Div(["tab-content"], 345 H5Div("tabVertical-pane-1", ["tab-pane", "active"], ["role":"tabpanel", "aria-labelledby":"tabVertical-1"], 346 H5P("Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. 347 Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. 348 Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. 349 Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 350 H5Div("tabVertical-pane-2", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabVertical-2"], 351 H5P("Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 352 H5Div("tabVertical-pane-3", ["tab-pane"], ["role":"tabpanel", "aria-labelledby":"tabVertical-3"], 353 H5P("Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."))))) 354 ), ``, ``); 355 356 auto fadeExample = demoBs5Example("fade", "Tab panel with fade effect", 357 H5Div( 358 BS5Nav(["nav-tabs"], ["role":"tablist"], 359 BS5NavItem(["role":"presentation"], 360 BS5NavLink("tabFade-1", ["active"], ["href":"#tabFade-pane-1", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabFade-pane-1", "aria-selected":"true"], "Panel 1")), 361 BS5NavItem(["role":"presentation"], 362 BS5NavLink("tabFade-2", ["href":"#tabFade-pane-2", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabFade-pane-2", "aria-selected":"false"], "Panel 2")), 363 BS5NavItem(["role":"presentation"], 364 BS5NavLink("tabFade-3", ["href":"#tabFade-pane-3", "data-bs-toggle":"tab", "role":"tab", "aria-controls":"tabFade-pane-3", "aria-selected":"false"], "Panel 3"))), 365 H5Div(["tab-content"], 366 H5Div("tabFade-pane-1", ["tab-pane", "fade", "show", "active"], ["role":"tabpanel", "aria-labelledby":"tabFade-1"], 367 H5P("Panel 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 368 H5Div("tabFade-pane-2", ["tab-pane", "fade"], ["role":"tabpanel", "aria-labelledby":"tabFade-2"], 369 H5P("Panel 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum.")), 370 H5Div("tabFade-pane-3", ["tab-pane", "fade"], ["role":"tabpanel", "aria-labelledby":"tabFade-3"], 371 H5P("Panel 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas feugiat, urna ut pharetra ultricies, augue tellus euismod turpis, vitae semper ipsum augue a velit. Pellentesque id finibus velit. Ut sagittis maximus maximus. In aliquet enim sed turpis mollis ornare. Suspendisse elementum a magna eu luctus. Etiam tincidunt mattis mauris, non lobortis nulla tempor in. Sed lacinia metus viverra, scelerisque enim sed, sollicitudin magna. Sed non augue sit amet nisl tincidunt ultrices. Praesent nec lacus eget tortor ultricies pulvinar. Praesent euismod ut lorem sit amet bibendum."))) 372 ), ``, ``); 373 374 return 375 H5Main(["style":"margin-top:70px;"], 376 H5Div(["container-fluid", "mt-3", "bg-light"], 377 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 378 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Navs")), 379 BS5Container(["mt-3"]).row( 380 H5Div(["col-12", "col-lg-2"], 381 listLevels("basic"), 382 listAreas("basic", "components"), 383 listSections("basic", "components", "navs")), 384 H5Div(["col-12", "col-lg-8"], 385 dateInfo(this), 386 H5H2(["display-4"], "Navs"), 387 H5Hr, 388 389 unorderedExample, 390 linksExample, 391 barExample, 392 horizontalExample, 393 verticalExample, 394 tabsExample, 395 pillsExample, 396 fillExample, 397 justifyExample, 398 responsiveExample, 399 dropdownExample, 400 tabpanelExample, 401 tablinksExample, 402 verticalpanelExample, 403 fadeExample 404 405 ), 406 H5Div(["col-12", "col-lg-2"]))).toString; 407 } 408 }); 409 }