1 module uim.bootstrap.bs5.demos.components.collapses; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/collapses", 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": "Collapses - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto linkExample = demoBs5Example("link", "Link<p>Show and hide other content with link using the 'href' attribute</p>", 20 H5Div( 21 BS5ButtonLink(["btn-primary"], ["href":"#hrefCollapse", "data-bs-toggle":"collapse", "aria-expanded":"false", "aria-controls":"hrefCollapse"], "Link with href"), 22 BS5Collapse("hrefCollapse", 23 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 24 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")) 25 ), 26 `BS5ButtonLink(["btn-primary"], ["href":"#hrefCollapse", "data-bs-toggle":"collapse", "aria-expanded":"false", "aria-controls":"hrefCollapse"], "Link with href"), 27 BS5Collapse("hrefCollapse", 28 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 29 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc."))`, 30 ``); 31 32 auto buttonExample = demoBs5Example("button", "Button<p>Show and hide other content with button using the 'data-bs-target' attribute</p>", 33 H5Div( 34 BS5Button(["btn-primary"], ["data-bs-toggle":"collapse", "data-bs-target":"#dataTargetCollapse", "aria-expanded":"false", "aria-controls":"dataTargetCollapse"], "Button with data-bs-target"), 35 BS5Collapse("dataTargetCollapse", 36 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 37 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc."))), ``, ``); 38 39 auto multipleExample = demoBs5Example("multiple", "Multiple targets", 40 H5Div( 41 BS5ButtonLink(["btn-primary"], ["href":"#hrefCollapse", "data-bs-toggle":"collapse", "data-bs-target":".multiple-collapse", "aria-expanded":"false", "aria-controls":"multipleCollapse1 multipleCollapse2"], "Button with data-bs-target"), 42 BS5Collapse("multipleCollapse1", ["multiple-collapse"], 43 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 44 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")), 45 BS5Collapse("multipleCollapse2", ["multiple-collapse"], 46 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 47 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")) 48 ), 49 `BS5ButtonLink(["btn-primary"], ["href":"#hrefCollapse", "data-bs-toggle":"collapse", "data-bs-target":".multiple-collapse", "aria-expanded":"false", "aria-controls":"multipleCollapse1 multipleCollapse2"], "Button with data-bs-target"), 50 BS5Collapse("multipleCollapse1", ["multiple-collapse"], 51 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 52 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc.")), 53 BS5Collapse("multipleCollapse2", ["multiple-collapse"], 54 BS5Alert(["alert-success"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis posuere consequat. 55 Nulla fermentum sodales augue, vitae ornare eros ornare quis. Donec lectus est, congue eu risus quis, tempus sagittis nunc."))`, 56 `H5Button(["type":"button" ["btn btn-primary" data-bs-toggle="collapse" data-bs-target=".multiple-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2"]Button with data-bs-target") 57 H5Div(["collapse multiple-collapse" id="multipleCollapse1"] 58 H5Div(["alert alert-success"]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.) 59 ) 60 H5Div(["collapse multiple-collapse" id="multipleCollapse2"] 61 H5Div(["alert alert-success"]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.) 62 )`); 63 64 return 65 H5Main(["style":"margin-top:70px;"], 66 H5Div(["container-fluid", "mt-3", "bg-light"], 67 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 68 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Collapses")), 69 BS5Container(["mt-3"]).row( 70 H5Div(["col-12", "col-lg-2"], 71 listLevels("basic"), 72 listAreas("basic", "components"), 73 listSections("basic", "components", "collapses")), 74 H5Div(["col-12", "col-lg-8"], 75 dateInfo(this), 76 H5H2(["display-4"], "Collapses"), 77 H5Hr, 78 79 linkExample, 80 buttonExample, 81 multipleExample 82 83 ))).toString; } 84 }); 85 }