1 module uim.bootstrap.bs5.demos.components.buttons; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/components/buttons", 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": "Buttons - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto defaultExample = demoBs5Example("default", "Default", 20 H5Div( 21 BS5Button(["btn-primary"], "Primary"), 22 BS5Button(["btn-secondary"], "Secondary"), 23 BS5Button(["btn-success"], "Success"), 24 BS5Button(["btn-danger"], "Danger"), 25 BS5Button(["btn-warning"], "Warning"), 26 BS5Button(["btn-info"], "Info"), 27 BS5Button(["btn-light"], "Light"), 28 BS5Button(["btn-dark"], "Dark") 29 ), ``, ``); 30 31 auto linksExample = demoBs5Example("links", "Links", 32 H5Div( 33 BS5Button(["btn-link"], "Link") 34 ), ``, ``); 35 36 auto classesExample = demoBs5Example("classes", `Button class with <code><a></code> and <code><input></code>`, 37 H5Div( 38 BS5ButtonLink(["btn-primary"], ["href":"#", "role":"button"], "Link"), 39 BS5InputButton(["btn-success"], ["value":"Input"]), 40 BS5InputSubmit(["btn-danger"], ["value":"Submit"]), 41 BS5InputReset(["btn-warning"], ["value":"Reset"]) 42 ), ``, ``); 43 44 auto outlinesExample = demoBs5Example("outlines", "Outline styles", 45 H5Div( 46 BS5Button(["btn-outline-primary"], "Primary"), 47 BS5Button(["btn-outline-secondary"], "Secondary"), 48 BS5Button(["btn-outline-success"], "Success"), 49 BS5Button(["btn-outline-danger"], "Danger"), 50 BS5Button(["btn-outline-warning"], "Warning"), 51 BS5Button(["btn-outline-info"], "Info"), 52 BS5Button(["btn-outline-light"], "Light"), 53 BS5Button(["btn-outline-dark"], "Dark")), 54 ``, ``); 55 56 auto sizingExample = demoBs5Example("sizing", "Button sizes", 57 H5Div( 58 BS5Button(["btn-secondary", "btn-sm"], "Small"), 59 BS5Button(["btn-secondary"], "Default"), 60 BS5Button(["btn-secondary", "btn-lg"], "Large") 61 ), ``, ``); 62 63 auto blockExample = demoBs5Example("block", "Block", 64 H5Div( 65 H5H5(["text-muted", "mt-3"], "Full width using sizing utility"), 66 BS5Button(["btn-secondary", "w-100"], "Block button"), 67 H5H5(["text-muted", "mt-3"], "Full width using display utility"), 68 H5Div(["d-grid"], 69 BS5Button(["btn-secondary"], "Block button")), 70 H5H5(["text-muted", "mt-3"], "Column width"), 71 H5Div(["d-grid", "col-6", "mx-auto"], 72 BS5Button(["btn-secondary"], "Block button")), 73 H5H5(["text-muted", "mt-3"], "Multiple block buttons"), 74 H5Div(["d-grid", "gap-2"], 75 BS5Button(["btn-secondary"], "Block button"), 76 BS5Button(["btn-secondary"], "Block button")), 77 H5H5(["text-muted", "mt-3"], "Responsive"), 78 H5Div(["d-grid", "gap-2", "d-lg-block"], 79 BS5Button(["btn-secondary"], "Block button"), 80 BS5Button(["btn-secondary"], "Block button")) 81 ), ``, ``); 82 83 auto blockExample2 = demoBs5Example("block", "Block", 84 H5Div( 85 H5H5(["text-muted", "mt-3"], "Active"), 86 BS5Button(["btn-primary"], "Not active"), 87 BS5Button(["btn-primary", "active"], "Active"), 88 H5H5(["text-muted", "mt-3"], "Disabled"), 89 BS5Button(["btn-primary"], ["disabled":"disabled"], "Disabled button"), 90 H5A(["btn", "btn-secondary", "disabled"], ["href":"#", "tabindex":"-1", "role":"button", "aria-disabled":"true"], "Disabled link") 91 ), ``, ``); 92 93 auto pluginExample = demoBs5Example("plugin", "Button Plugin", 94 H5Div( 95 H5H5(["text-muted", "mt-3"], "Toggle buttons"), 96 BS5Button(["btn-primary"], ["data-bs-toggle":"button", "autocomplete":"off"], "Not active"), 97 BS5Button(["btn-primary", "active"], ["data-bs-toggle":"button", "autocomplete":"off", "aria-pressed":"true"], "Active"), 98 BS5Button(["btn-primary"], ["data-bs-toggle":"button", "autocomplete":"off","disabled":"disabled"], "Disabled"), 99 H5H5(["text-muted", "mt-3"], "Toggle links"), 100 H5A(["btn", "btn-primary"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Not active"), 101 H5A(["btn", "btn-primary", "active"], ["href":"#", "role":"button", "data-bs-toggle":"button", "aria-pressed":"true"], "Active"), 102 H5A(["btn", "btn-primary", "disabled"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Disabled") 103 ), 104 `BS5Button(["btn-primary"], ["data-bs-toggle":"button", "autocomplete":"off"], "Not active"), 105 BS5Button(["btn-primary", "active"], ["data-bs-toggle":"button", "autocomplete":"off", "aria-pressed":"true"], "Active"), 106 BS5Button(["btn-primary"], ["data-bs-toggle":"button", "autocomplete":"off","disabled":"disabled"], "Disabled"), 107 H5A(["btn", "btn-primary"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Not active"), 108 H5A(["btn", "btn-primary", "active"], ["href":"#", "role":"button", "data-bs-toggle":"button", "aria-pressed":"true"], "Active"), 109 H5A(["btn", "btn-primary", "disabled"], ["href":"#", "role":"button", "data-bs-toggle":"button"], "Disabled")`, ``); 110 111 return 112 H5Main(["style":"margin-top:70px;"], 113 H5Div(["container-fluid", "mt-3", "bg-light"], 114 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 115 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Buttons")), 116 BS5Container(["mt-3"]).row( 117 H5Div(["col-12", "col-lg-2"], 118 listLevels("basic"), 119 listAreas("basic", "components"), 120 listSections("basic", "components", "buttons")), 121 H5Div(["col-12", "col-lg-8"], 122 dateInfo(this), 123 H5H2(["display-4"], "Buttons"), 124 H5Hr, 125 126 defaultExample, 127 linksExample, 128 classesExample, 129 outlinesExample, 130 sizingExample, 131 blockExample, 132 blockExample2, 133 pluginExample 134 135 ), 136 H5Div(["col-12", "col-lg-2"]))).toString; 137 } 138 }); 139 }