source.uim.bootstrap.bs5.demos.forms.checks

1 module source.uim.bootstrap.bs5.demos.forms.checks_radios;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/forms/checks_radios", 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": "Checks and Radios - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19       auto checksExample = demoBs5Example("checks", "Checks", 
20 H5Div(
21   H5H5(["text-muted", "mt-3"], "Default"),
22   BS5FormCheck(
23     H5Input("checkDefault1", ["form-check-input"], ["type":"checkbox"]), 
24     BS5FormCheckLabel(["for":"checkDefault1"], "Default checkbox")
25   ),
26   BS5FormCheck(
27     H5Input("checkDefault2", ["form-check-input"], ["type":"checkbox", "checked":"checked"]),
28     BS5FormCheckLabel(["for":"checkDefault2"], "Checked checkbox")
29   ),
30   H5H5(["text-muted", "mt-3"], "Indeterminate"),
31   BS5FormCheck(
32     H5Input("checkIndeterminate", ["form-check-input"], ["type":"checkbox"]),
33     BS5FormCheckLabel(["for":"checkIndeterminate"], "Indeterminate checkbox"),
34     H5Script("var checkbox = document.getElementById('checkIndeterminate');checkbox.indeterminate = true;")
35   ),
36   H5H5(["text-muted", "mt-3"], "Disabled"),
37   BS5FormCheck(
38     H5Input("checkDisabled1", ["form-check-input"], ["type":"checkbox", "disabled":"disabled"]),
39     BS5FormCheckLabel(["for":"checkDisabled1"], "Disabled default checkbox")
40   ),
41   BS5FormCheck(
42     H5Input("checkDisabled2", ["form-check-input"], ["type":"checkbox", "checked":"checked", "disabled":"disabled"]),
43     BS5FormCheckLabel(["for":"checkDisabled2"], "Disabled checked checkbox")
44   )
45 ), ``, ``);
46 
47       auto radiosExample = demoBs5Example("radios", "Radios", 
48 H5Div(
49   H5H5(["text-muted", "mt-3"], "Default"),
50   BS5FormCheck(
51     H5Input("radioDefault1", ["form-check-input"], ["type":"radio", "name":"radioDefault"]),
52     BS5FormCheckLabel(["for":"radioDefault1"], "Default radio")
53   ),
54   BS5FormCheck(
55     H5Input("radioDefault2", ["form-check-input"], ["type":"radio", "name":"radioDefault", "checked":"checked"]),
56     BS5FormCheckLabel(["for":"radioDefault2"], "Checked radio")
57   ),
58   H5H5(["text-muted", "mt-3"], "Disabled"),
59   BS5FormCheck(
60     H5Input("radioDisabled1", ["form-check-input"], ["type":"radio", "name":"radioDisabled", "disabled":"disabled"]),
61     BS5FormCheckLabel(["for":"radioDisabled1"], "Disabled default radio")
62   ),
63   BS5FormCheck(
64     H5Input("radioDisabled2", ["form-check-input"], ["type":"radio", "name":"radioDisabled", "checked":"checked", "disabled":"disabled"]),
65     BS5FormCheckLabel(["for":"radioDisabled2"], "Disabled checked radio")
66   )
67 ), ``, ``);
68 
69       auto switchesExample = demoBs5Example("switches", "Switches", 
70 H5Div(
71   H5H5(["text-muted", "mt-3"], "Default"),
72   H5Div(["form-check form-switch"], 
73     H5Input("switchDefault1", ["form-check-input"], ["type":"checkbox"]),
74     BS5FormCheckLabel(["for":"switchDefault1"], "Default switch")
75   ),
76   H5Div(["form-check form-switch"], 
77     H5Input("switchDefault2", ["form-check-input"], ["type":"checkbox", "checked":"checked"]),
78     BS5FormCheckLabel(["for":"switchDefault2"], "Checked switch")
79   ),
80   H5H5(["text-muted", "mt-3"], "Disabled"),
81   H5Div(["form-check form-switch"], 
82     H5Input("switchDisabled1", ["form-check-input"], ["type":"checkbox", "disabled":"disabled"]),
83     BS5FormCheckLabel(["for":"switchDisabled1"], "Disabled default switch")
84   ),
85   H5Div(["form-check form-switch"], 
86     H5Input("switchDisabled2", ["form-check-input"], ["type":"checkbox", "checked":"checked", "disabled":"disabled"]),
87     BS5FormCheckLabel(["for":"switchDisabled2"], "Disabled checked switch")
88   )
89 ), ``, ``);
90 
91       auto inlineExample = demoBs5Example("inline", "Inline", 
92 H5Div(
93   H5H5(["text-muted", "mt-3"], "Check"),
94   BS5FormCheck(["form-check-inline"], 
95     H5Input("checkInline1", ["form-check-input"], ["type":"checkbox"]),   
96     BS5FormCheckLabel(["for":"checkInline1"], "1")
97   ),
98   BS5FormCheck(["form-check-inline"], 
99     H5Input("checkInline2", ["form-check-input"], ["type":"checkbox", "checked":"checked"]),
100     BS5FormCheckLabel(["for":"checkInline2"], "2")
101   ),
102   BS5FormCheck(["form-check-inline"], 
103     H5Input("checkInline3", ["form-check-input"], ["type":"checkbox", "disabled":"disabled"]),
104     BS5FormCheckLabel(["for":"switchDisabled2"], "Disabled checked switch"),
105     BS5FormCheckLabel(["for":"checkInline3"], "3")
106   ),
107   H5H5(["text-muted", "mt-3"], "Radio"),
108   BS5FormCheck(["form-check-inline"], 
109     H5Input("radioInline1", ["form-check-input"], ["type":"radio",  "name":"radioInline"]),
110     BS5FormCheckLabel(["for":"radioInline1"], "1")
111   ),
112   BS5FormCheck(["form-check-inline"], 
113     H5Input("radioInline2", ["form-check-input"], ["type":"radio",  "name":"radioInline", "checked":"checked"]),
114     BS5FormCheckLabel(["for":"radioInline2"], "2")
115   ),
116   BS5FormCheck(["form-check-inline"], 
117     H5Input("radioInline3", ["form-check-input"], ["type":"radio",  "name":"radioInline", "disabled":"disabled"]),
118     BS5FormCheckLabel(["for":"radioInline3"], "3")
119   )
120 ), ``, ``);
121 
122  auto nolabelsExample = demoBs5Example("nolabels", "No labels", 
123 H5Div(
124   H5Input("checkNolabel", ["form-check-input"], ["type":"checkbox", "aria-label":"Checkbox label"]),
125   H5Input("radioNoLabel1", ["form-check-input"], ["type":"radio",  "name":"radioNolabel", "aria-label":"Radio label"])
126 ), ``, ``);
127 
128  auto togglebuttonsExample = demoBs5Example("togglebuttons", "Toggle buttons", 
129 H5Div(
130   H5H5(["text-muted", "mt-3"], "Checkbox"),
131   H5Input("checkToggleButton1", ["btn-check"], ["type":"checkbox", "autocomplete":"off"]),
132   H5Label(["btn", "btn-secondary"], ["for":"checkToggleButton1"], "Checkbox"),
133   H5H5(["text-muted", "mt-3"], "Radio"),
134   BS5ButtonGroup(
135     H5Input("radioToggleButton1", ["btn-check"], ["type":"radio", "name":"radioToggleButton", "autocomplete":"off"]),
136     H5Label(["btn btn-secondary"], ["for":"radioToggleButton1"], "Radio 1"),
137     H5Input("radioToggleButton2", ["btn-check"], ["type":"radio", "name":"radioToggleButton", "autocomplete":"off"]),
138     H5Label(["btn btn-secondary"], ["for":"radioToggleButton2"], "Radio 2"),
139     H5Input("radioToggleButton3", ["btn-check"], ["type":"radio", "name":"radioToggleButton", "autocomplete":"off"]),
140     H5Label(["btn btn-secondary"], ["for":"radioToggleButton3"], "Radio 3")
141   ),
142   H5H5(["text-muted", "mt-3"], "Outlined"),
143   H5Input("checkToggleButtonOutlined1", ["btn-check"], ["type":"checkbox", "autocomplete":"off"]),
144   H5Label(["btn btn-outline-secondary"], ["for":"checkToggleButtonOutlined1"], "Checkbox"),
145   H5Br, H5Br,
146   BS5ButtonGroup(
147     H5Input("radioToggleButtonOutlined1", ["btn-check"], ["type":"radio", "name":"radioToggleButtonOutlined", "autocomplete":"off"]),
148     H5Label(["btn btn-outline-primary"], ["for":"radioToggleButtonOutlined1"], "Radio 1"),
149     H5Input("radioToggleButtonOutlined2", ["btn-check"], ["type":"radio", "name":"radioToggleButtonOutlined", "autocomplete":"off"]),
150     H5Label(["btn btn-outline-success"], ["for":"radioToggleButtonOutlined2"], "Radio 2"),
151     H5Input("radioToggleButtonOutlined3", ["btn-check"], ["type":"radio", "name":"radioToggleButtonOutlined", "autocomplete":"off"]),
152     H5Label(["btn btn-outline-info"], ["for":"radioToggleButtonOutlined3"], "Radio 3")
153   )
154 ), ``, ``);
155 
156        return 
157 H5Main(["style":"margin-top:70px;"], 
158   H5Div(["container-fluid", "mt-3", "bg-light"],
159     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 
160     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Checks and Radios")),
161 
162   BS5Container(["mt-3"]).row(
163     H5Div(["col-12", "col-lg-2"], 
164       listLevels("basic"),
165       listAreas("basic", "forms"),
166       listSections("basic", "forms", "checks_radios")),
167     H5Div(["col-12", "col-lg-8"], 
168       dateInfo(this),
169       H5H2(["display-4"], "Checks and Radios"),
170       H5Hr,
171 
172       checksExample,
173       radiosExample,
174       switchesExample,
175       inlineExample,
176       nolabelsExample,
177       togglebuttonsExample, 
178 
179     ),
180     H5Div(["col-12", "col-lg-2"]))).toString;
181     }
182   });
183 }