1 module uim.bootstrap.bs5.demos.components.accordions; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/accordions", 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": "Accordions - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto defaultExample = demoBs5Example("default", "Default", 20 H5Div( 21 BS5Accordion("accordionDefault", 22 BS5AccordionItem( 23 BS5AccordionHeader("headingDefaultOne", 24 BS5AccordionButton(["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultOne", "aria-expanded":"true", "aria-controls":"collapseDefaultOne"], "Accordion Item #1")), 25 BS5AccordionCollapse("collapseDefaultOne", ["collapse", "show"], ["aria-labelledby":"headingDefaultOne", "data-bs-parent":"#accordionDefault"], 26 BS5AccordionBody( 27 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 28 ))), 29 BS5AccordionItem( 30 BS5AccordionHeader("headingDefaultTwo", 31 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultTwo", "aria-expanded":"false", "aria-controls":"collapseDefaultTwo"], "Accordion Item #2")), 32 BS5AccordionCollapse("collapseDefaultTwo", ["collapse"], ["aria-labelledby":"headingDefaultTwo", "data-bs-parent":"#accordionDefault"], 33 BS5AccordionBody( 34 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero."))), 35 BS5AccordionItem( 36 BS5AccordionHeader("headingDefaultThree", 37 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultThree", "aria-expanded":"false", "aria-controls":"collapseDefaultThree"], "Accordion Item #3")), 38 BS5AccordionCollapse("collapseDefaultThree", ["collapse"], ["aria-labelledby":"headingDefaultThree", "data-bs-parent":"#accordionDefault"], 39 BS5AccordionBody( 40 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 41 )))) 42 ), `BS5Accordion("accordionDefault", 43 BS5AccordionItem( 44 BS5AccordionHeader("headingDefaultOne", 45 BS5AccordionButton(["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultOne", "aria-expanded":"true", "aria-controls":"collapseDefaultOne"], "Accordion Item #1")), 46 BS5AccordionCollapse("collapseDefaultOne", ["collapse", "show"], ["aria-labelledby":"headingDefaultOne", "data-bs-parent":"#accordionDefault"], 47 BS5AccordionBody( 48 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 49 ))), 50 BS5AccordionItem( 51 BS5AccordionHeader("headingDefaultTwo", 52 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultTwo", "aria-expanded":"false", "aria-controls":"collapseDefaultTwo"], "Accordion Item #2")), 53 BS5AccordionCollapse("collapseDefaultTwo", ["collapse"], ["aria-labelledby":"headingDefaultTwo", "data-bs-parent":"#accordionDefault"], 54 BS5AccordionBody( 55 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero."))), 56 BS5AccordionItem( 57 BS5AccordionHeader("headingDefaultThree", 58 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseDefaultThree", "aria-expanded":"false", "aria-controls":"collapseDefaultThree"], "Accordion Item #3")), 59 BS5AccordionCollapse("collapseDefaultThree", ["collapse"], ["aria-labelledby":"headingDefaultThree", "data-bs-parent":"#accordionDefault"], 60 BS5AccordionBody( 61 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 62 )))) 63 64 --- Compact version --- 65 66 67 `, 68 `H5Div(["accordion" id="accordionDefault"] 69 H5Div(["accordion-item"] 70 <h2 ["accordion-header" id="headingDefaultOne"] 71 H5Button(["type":"button" ["accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseDefaultOne" aria-expanded="true" aria-controls="collapseDefaultOne"] 72 Accordion Item #1 73 ") 74 </h2> 75 <div id="collapseDefaultOne" ["accordion-collapse collapse show" aria-labelledby="headingDefaultOne" data-bs-parent="#accordionDefault"] 76 H5Div(["accordion-body"] 77 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 78 ) 79 ) 80 ) 81 H5Div(["accordion-item"] 82 <h2 ["accordion-header" id="headingDefaultTwo"] 83 H5Button(["type":"button" ["accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseDefaultTwo" aria-expanded="false" aria-controls="collapseDefaultTwo"] 84 Accordion Item #2 85 ") 86 </h2> 87 <div id="collapseDefaultTwo" ["accordion-collapse collapse" aria-labelledby="headingDefaultTwo" data-bs-parent="#accordionDefault"] 88 H5Div(["accordion-body"] 89 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 90 ) 91 ) 92 ) 93 H5Div(["accordion-item"] 94 <h2 ["accordion-header" id="headingDefaultThree"] 95 H5Button(["type":"button" ["accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseDefaultThree" aria-expanded="false" aria-controls="collapseDefaultThree"] 96 Accordion Item #3 97 ") 98 </h2> 99 <div id="collapseDefaultThree" ["accordion-collapse collapse" aria-labelledby="headingDefaultThree" data-bs-parent="#accordionDefault"] 100 H5Div(["accordion-body"] 101 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 102 ) 103 ) 104 ) 105 )`); 106 107 auto flushExample = demoBs5Example("flush", "Flush", 108 H5Div( 109 BS5Accordion("accordionFlush", ["accordion-flush"]) 110 .item( 111 BS5AccordionHeader("headingFlushOne", [""]) 112 .button(["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushOne", "aria-expanded":"true", "aria-controls":"collapseFlushOne"], "Accordion Item #1"), 113 BS5AccordionCollapse("collapseFlushOne", ["collapse", "show"], ["aria-labelledby":"headingFlushOne", "data-bs-parent":"#accordionFlush"]) 114 .body_( 115 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 116 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 117 .item( 118 BS5AccordionHeader("headingFlushTwo", [""]) 119 .button(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushTwo", "aria-expanded":"false", "aria-controls":"collapseFlushTwo"], "Accordion Item #2"), 120 BS5AccordionCollapse("collapseFlushTwo", ["collapse"], ["aria-labelledby":"headingFlushTwo", "data-bs-parent":"#accordionFlush"]) 121 .body_( 122 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 123 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 124 .item( 125 BS5AccordionHeader("headingFlushThree", [""]) 126 .button(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushThree", "aria-expanded":"false", "aria-controls":"collapseFlushThree"], "Accordion Item #3"), 127 BS5AccordionCollapse("collapseFlushThree", ["collapse"], ["aria-labelledby":"headingFlushThree", "data-bs-parent":"#accordionFlush"]) 128 .body_( 129 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 130 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 131 ), `--- base version --- 132 133 BS5Accordion("accordionFlush", ["accordion-flush"], 134 BS5AccordionItem( 135 BS5AccordionHeader("headingFlushOne", 136 BS5AccordionButton(["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushOne", "aria-expanded":"true", "aria-controls":"collapseFlushOne"], "Accordion Item #1")), 137 BS5AccordionCollapse("collapseFlushOne", ["collapse", "show"], ["aria-labelledby":"headingFlushOne", "data-bs-parent":"#accordionFlush"], 138 BS5AccordionBody( 139 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 140 ))), 141 BS5AccordionItem( 142 BS5AccordionHeader("headingFlushTwo", 143 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushTwo", "aria-expanded":"false", "aria-controls":"collapseFlushTwo"], "Accordion Item #2")), 144 BS5AccordionCollapse("collapseFlushTwo", ["collapse"], ["aria-labelledby":"headingFlushTwo", "data-bs-parent":"#accordionFlush"], 145 BS5AccordionBody( 146 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 147 ))), 148 BS5AccordionItem( 149 BS5AccordionHeader("headingFlushThree", 150 BS5AccordionButton(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushThree", "aria-expanded":"false", "aria-controls":"collapseFlushThree"], "Accordion Item #3")), 151 BS5AccordionCollapse("collapseFlushThree", ["collapse"], ["aria-labelledby":"headingFlushThree", "data-bs-parent":"#accordionFlush"], 152 BS5AccordionBody( 153 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero." 154 )))) 155 156 --- compact version --- 157 158 BS5Accordion("accordionFlush", ["accordion-flush"]) 159 .item( 160 BS5AccordionHeader("headingFlushOne", [""]) 161 .button(["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushOne", "aria-expanded":"true", "aria-controls":"collapseFlushOne"], "Accordion Item #1"), 162 BS5AccordionCollapse("collapseFlushOne", ["collapse", "show"], ["aria-labelledby":"headingFlushOne", "data-bs-parent":"#accordionFlush"]) 163 .body_( 164 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 165 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 166 .item( 167 BS5AccordionHeader("headingFlushTwo", [""]) 168 .button(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushTwo", "aria-expanded":"false", "aria-controls":"collapseFlushTwo"], "Accordion Item #2"), 169 BS5AccordionCollapse("collapseFlushTwo", ["collapse"], ["aria-labelledby":"headingFlushTwo", "data-bs-parent":"#accordionFlush"]) 170 .body_( 171 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 172 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 173 .item( 174 BS5AccordionHeader("headingFlushThree", [""]) 175 .button(["collapsed"], ["data-bs-toggle":"collapse", "data-bs-target":"#collapseFlushThree", "aria-expanded":"false", "aria-controls":"collapseFlushThree"], "Accordion Item #3"), 176 BS5AccordionCollapse("collapseFlushThree", ["collapse"], ["aria-labelledby":"headingFlushThree", "data-bs-parent":"#accordionFlush"]) 177 .body_( 178 "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. 179 Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo.")) 180 181 `, `H5Div(["accordion accordion-flush" id="accordionFlush"] 182 H5Div(["accordion-item"] 183 <h2 ["accordion-header" id="headingFlushOne"] 184 H5Button(["type":"button" ["accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseFlushOne" aria-expanded="true" aria-controls="collapseFlushOne"] 185 Accordion Item #1 186 ") 187 </h2> 188 <div id="collapseFlushOne" ["accordion-collapse collapse show" aria-labelledby="headingFlushOne" data-bs-parent="#accordionFlush"] 189 H5Div(["accordion-body"] 190 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 191 ) 192 ) 193 ) 194 H5Div(["accordion-item"] 195 <h2 ["accordion-header" id="headingFlushTwo"] 196 H5Button(["type":"button" ["accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFlushTwo" aria-expanded="false" aria-controls="collapseFlushTwo"] 197 Accordion Item #2 198 ") 199 </h2> 200 <div id="collapseFlushTwo" ["accordion-collapse collapse" aria-labelledby="headingFlushTwo" data-bs-parent="#accordionFlush"] 201 H5Div(["accordion-body"] 202 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 203 ) 204 ) 205 ) 206 H5Div(["accordion-item"] 207 <h2 ["accordion-header" id="headingFlushThree"] 208 H5Button(["type":"button" ["accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFlushThree" aria-expanded="false" aria-controls="collapseFlushThree"] 209 Accordion Item #3 210 ") 211 </h2> 212 <div id="collapseFlushThree" ["accordion-collapse collapse" aria-labelledby="headingFlushThree" data-bs-parent="#accordionFlush"] 213 H5Div(["accordion-body"] 214 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc. Donec blandit accumsan augue eu bibendum. Suspendisse pretium facilisis sapien, ac dignissim leo. Phasellus fermentum nulla eget quam congue sagittis. Donec volutpat vel sapien sit amet lobortis. Aenean non vulputate nunc, eu luctus libero. 215 ) 216 ) 217 ) 218 )`); 219 220 return 221 H5Main(["style":"margin-top:70px;"], 222 H5Div(["container-fluid", "mt-3", "bg-light"], 223 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 224 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Accordions")), 225 BS5Container(["mt-3"]).row( 226 H5Div(["col-12", "col-lg-2"], 227 listLevels("basic"), 228 listAreas("basic", "components"), 229 listSections("basic", "components", "accordions")), 230 H5Div(["col-12", "col-lg-8"], 231 dateInfo(this), 232 H5H2(["display-4"], "Accordions"), 233 H5Hr, 234 235 defaultExample, 236 flushExample 237 238 ), 239 H5Div(["col-12", "col-lg-2"]))).toString; 240 } 241 }); 242 }