1 module uim.bootstrap.bs5.demos.components.listgroups; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/listgroups", 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": "List Groups - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto defaultExample = demoBs5Example("default", "Default list group", 20 H5Div( 21 BS5List 22 .item("List group item 1") 23 .item("List group item 2") 24 .item("List group item 3") 25 ), `BS5List( 26 BS5ListItem("List group item 1"), 27 BS5ListItem("List group item 2"), 28 BS5ListItem("List group item 3")) 29 30 --- compact version --- 31 32 BS5List 33 .item("List group item 1") 34 .item("List group item 2") 35 .item("List group item 3")`, 36 `<ul class="list-group"> 37 <li class="list-group-item">List group item 1</li> 38 <li class="list-group-item">List group item 2</li> 39 <li class="list-group-item">List group item 3</li> 40 </ul>`); 41 42 auto activeExample = demoBs5Example("active", "List group with an active item", 43 H5Div( 44 BS5List 45 .item("List group item one") 46 .item(["active"], ["aria-current":"true"], "List group item two") 47 .item("List group item three") 48 ), 49 `BS5List( 50 BS5ListItem("List group item 1"), 51 BS5ListItem(["active"], ["aria-current":"true"], "List group item 2"), 52 BS5ListItem("List group item 3")) 53 54 --- compact version --- 55 56 BS5List 57 .item("List group item 1") 58 .item(["active"], ["aria-current":"true"], "List group item 2") 59 .item("List group item 3")`, 60 `<ul class="list-group"> 61 <li class="list-group-item">List group item 1</li> 62 <li class="active list-group-item" aria-current="true">List group item 2</li> 63 <li class="list-group-item">List group item 3</li> 64 </ul>`); 65 66 auto disabledExample = demoBs5Example("disabled", "List group with a disabled item", 67 H5Div( 68 BS5List 69 .item("List group item 1") 70 .item(["disabled"], ["aria-disabled":"true"], "List group item 2") 71 .item("List group item 3") 72 ), `BS5List( 73 BS5ListItem("List group item 1"), 74 BS5ListItem(["disabled"], ["aria-disabled":"true"], "List group item 2"), 75 BS5ListItem("List group item 3")) 76 77 --- compact version --- 78 79 BS5List 80 .item("List group item 1") 81 .item(["disabled"], ["aria-disabled":"true"], "List group item 2") 82 .item("List group item 3") 83 `, 84 `<ul class="list-group"> 85 <li class="list-group-item">List group item 1</li> 86 <li class="disabled list-group-item" aria-disabled="true">List group item 2</li> 87 <li class="list-group-item">List group item 3</li> 88 </ul>`); 89 90 auto linksExample = demoBs5Example("links", "Working with Links", 91 H5Div( 92 BS5List 93 .link(["href":"#"], "List group item 1") 94 .link(["active"], ["href":"#", "aria-disabled":"true"], "List group item 2") 95 .link(["disabled"], ["href":"#", "aria-disabled":"true", "tabindex":"-1"], "List group item 3") 96 ), `BS5List( 97 BS5ListLink(["href":"#"], "List group item 1"), 98 BS5ListLink(["active"], ["href":"#", "aria-disabled":"true"], "List group item 2"), 99 BS5ListLink(["disabled"], ["href":"#", "aria-disabled":"true", "tabindex":"-1"], "List group item 3")) 100 101 --- compact version --- 102 103 BS5List 104 .link(["href":"#"], "List group item 1") 105 .link(["active"], ["href":"#", "aria-disabled":"true"], "List group item 2") 106 .link(["disabled"], ["href":"#", "aria-disabled":"true", "tabindex":"-1"], "List group item 3") 107 `, ``); 108 109 auto buttonsExample = demoBs5Example("buttons", "Buttons", 110 H5Div( 111 BS5List 112 .button("List group item 1") 113 .button(["active"], ["aria-current":"true"], "List group item 2") 114 .button(["disabled"], ["aria-disabled":"true"], "List group item 3") 115 ), `BS5List( 116 BS5ButtonLink("List group item 1"), 117 BS5ButtonLink(["active"], ["aria-current":"true"], "List group item 2"), 118 BS5ButtonLink(["diaabled"], ["aria-current":"true"], "List group item 3")) 119 120 --- compact version --- 121 122 BS5List 123 .button("List group item 1") 124 .button(["active"], ["aria-current":"true"], "List group item 2") 125 .button(["disabled"], ["aria-disabled":"true"], "List group item 3") 126 `, ``); 127 128 auto flushExample = demoBs5Example("flush", "Flush", 129 H5Div( 130 BS5List(["list-group-flush"]) 131 .item("List group item 1") 132 .item("List group item 2") 133 .item("List group item 3") 134 ), `BS5List(["list-group-flush"], 135 BS5ListItem("List group item 1"), 136 BS5ListItem("List group item 2"), 137 BS5ListItem("List group item 3")) 138 139 --- compact version --- 140 141 BS5List(["list-group-flush"]) 142 .item("List group item 1") 143 .item("List group item 2") 144 .item("List group item 3") 145 `, `<ul class="list-group list-group-flush"> 146 <li class="list-group-item">List group item 1</li> 147 <li class="list-group-item">List group item 2</li> 148 <li class="list-group-item">List group item 3</li> 149 </ul>`); 150 151 auto horizontalExample = demoBs5Example("horizontal", "Horizontal", 152 H5Div( 153 H5H5(["text-muted", "mt-3"], "Using breakpoints with list groups"), 154 BS5List(["list-group-horizontal"], 155 BS5ListItem("List group item 1"), 156 BS5ListItem("List group item 2"), 157 BS5ListItem("List group item 3")), 158 H5H5(["text-muted", "mt-3"], "Sizes small and up (sm)"), 159 BS5List(["list-group-horizontal-sm"], 160 BS5ListItem("List group item 1"), 161 BS5ListItem("List group item 2"), 162 BS5ListItem("List group item 3")), 163 H5H5(["text-muted", "mt-3"], "Sizes medium and up (md)"), 164 BS5List(["list-group-horizontal-md"], 165 BS5ListItem("List group item 1"), 166 BS5ListItem("List group item 2"), 167 BS5ListItem("List group item 3")), 168 H5H5(["text-muted", "mt-3"], "Sizes large and up (lg)"), 169 BS5List(["list-group-horizontal-lg"], 170 BS5ListItem("List group item 1"), 171 BS5ListItem("List group item 2"), 172 BS5ListItem("List group item 3")), 173 H5H5(["text-muted", "mt-3"], "Sizes extra Large and up (xl)"), 174 BS5List(["list-group-horizontal-xl"], 175 BS5ListItem("List group item 1"), 176 BS5ListItem("List group item 2"), 177 BS5ListItem("List group item 3")) 178 ), ``, ``); 179 180 auto equalwidthExample = demoBs5Example("equalwidth", "Defining equal-width list group item", 181 H5Div( 182 H5H5(["text-muted", "mt-3"], "All breakpoints"), 183 BS5List(["list-group-horizontal"], 184 BS5ListItem(["flex-fill"], "List group item 1"), 185 BS5ListItem(["flex-fill"], "List group item 2"), 186 BS5ListItem(["flex-fill"], "List group item 3")) 187 ), ``, ``); 188 189 auto colorsExample = demoBs5Example("colors", "Using colors in Listgroups", 190 H5Div( 191 H5H5(["text-muted", "mt-3"], "All breakpoints"), 192 BS5List(["list-group-horizontal"], 193 BS5ListItem(["flex-fill"], "List group item 1"), 194 BS5ListItem(["flex-fill"], "List group item 2"), 195 BS5ListItem(["flex-fill"], "List group item 3")), 196 H5H5(["text-muted", "mt-3"], "Normal list group"), 197 BS5List( 198 BS5ListItem("Default list group item"), 199 BS5ListItem(["list-group-item-primary"], "Primary"), 200 BS5ListItem(["list-group-item-secondary"], "Secondary"), 201 BS5ListItem(["list-group-item-success"], "Succcess"), 202 BS5ListItem(["list-group-item-danger"], "Danger"), 203 BS5ListItem(["list-group-item-warning"], "Warning"), 204 BS5ListItem(["list-group-item-info"], "Info"), 205 BS5ListItem(["list-group-item-light"], "Light"), 206 BS5ListItem(["list-group-item-dark"], "Dark")), 207 H5H5(["text-muted", "mt-3"], "List group with links"), 208 BS5List( 209 BS5ListLink("Default list group item"), 210 BS5ListLink(["list-group-item-primary"], "Primary"), 211 BS5ListLink(["list-group-item-secondary"], "Secondary"), 212 BS5ListLink(["list-group-item-success"], "Succcess"), 213 BS5ListLink(["list-group-item-danger"], "Danger"), 214 BS5ListLink(["list-group-item-warning"], "Warning"), 215 BS5ListLink(["list-group-item-info"], "Info"), 216 BS5ListLink(["list-group-item-light"], "Light"), 217 BS5ListLink(["list-group-item-dark"], "Dark")) 218 ), ``, ``); 219 220 auto badgesExample = demoBs5Example("badges", "Badges", 221 H5Div( 222 BS5List( 223 BS5ListItem(["d-flex", "justify-content-between", "align-items-center"], 224 H5String("List group item one"), BS5Badge(["rounded-pill", "bg-primary"], "#")), 225 BS5ListItem(["d-flex", "justify-content-between", "align-items-center"], 226 H5String("List group item one"), BS5Badge(["rounded-pill", "bg-primary"], "##")), 227 BS5ListItem(["d-flex", "justify-content-between", "align-items-center"], 228 H5String("List group item one"), BS5Badge(["rounded-pill", "bg-primary"], "###"))) 229 ), ``, ``); 230 231 auto customExample = demoBs5Example("custom", "Custom content", 232 H5Div( 233 BS5List( 234 BS5ListLink(["active"], ["href":"#", "aria-current":"true"], 235 H5H4("Active item"), 236 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 237 H5Small("Etiam eleifend velit leo.")), 238 BS5ListLink(["href":"#"], 239 H5H4("Normal item"), 240 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 241 H5Small("Etiam eleifend velit leo.")), 242 BS5ListLink(["disabled"], ["href":"#"], 243 H5H4("Disabled item"), 244 H5P("Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 245 H5Small("Etiam eleifend velit leo."))) 246 ), ``, ``); 247 248 auto tabsExample = demoBs5Example("tabs", "Tab panels", 249 H5Div( 250 BS5Row( 251 H5Div(["col-4"], 252 H5Div(["list-group"], ["role":"tablist"], 253 BS5ListLink("tab-1", ["active"], ["href":"#tab-pane-1", "data-toggle":"list", "role":"tab", "aria-controls":"tab-pane-1"], "Tab pane 1"), 254 BS5ListLink("tab-2", ["href":"#tab-pane-2", "data-toggle":"list", "role":"tab", "aria-controls":"tab-pane-2"], "Tab pane 2"), 255 BS5ListLink("tab-3", ["href":"#tab-pane-3", "data-toggle":"list", "role":"tab", "aria-controls":"tab-pane-3"], "Tab pane 3"))), 256 H5Div(["col-4"], 257 H5Div(["tab-content"], 258 H5Div("tab-pane-1", ["tab-pane", "fade", "show", "active"], ["role":"tabpanel", "aria-labelledby":"tab-1"], 259 "Tab pane 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 260 H5Div("tab-pane-2", ["tab-pane", "fade", "show"], ["role":"tabpanel", "aria-labelledby":"tab-2"], 261 "Tab pane 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo."), 262 H5Div("tab-pane-3", ["tab-pane", "fade", "show"], ["role":"tabpanel", "aria-labelledby":"tab-3"], 263 "Tab pane 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.") 264 ))) 265 ), ``, ``); 266 267 return 268 H5Main(["style":"margin-top:70px;"], 269 H5Div(["container-fluid", "mt-3", "bg-light"], 270 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 271 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "List Groups")), 272 BS5Container(["mt-3"]).row( 273 H5Div(["col-12", "col-lg-2"], 274 listLevels("basic"), 275 listAreas("basic", "components"), 276 listSections("basic", "components", "listgroups")), 277 H5Div(["col-12", "col-lg-8"], 278 dateInfo(this), 279 H5H2(["display-4"], "List Groups"), 280 H5Hr, 281 282 defaultExample, 283 activeExample, 284 disabledExample, 285 linksExample, 286 buttonsExample, 287 flushExample, 288 horizontalExample, 289 equalwidthExample, 290 colorsExample, 291 badgesExample, 292 customExample, 293 tabsExample 294 295 ))).toString; 296 297 } 298 }); 299 }