source.uim.bootstrap.bs5.demos.forms.select source code

1 module source.uim.bootstrap.bs5.demos.forms.select;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/forms/select", 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": "Select - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 auto defaultExample = demoBs5Example("default", "Default", 
19   H5Div(
20     BS5FormLabel(["for":"inputSelect"], "Default select"),
21     BS5InputSelect("inputSelect", ["aria-label":"Default select"],
22       H5Option(["selected":"selected"], "Select option"),
23       H5Option(["value":"2"], "Option two"),
24       H5Option(["value":"1"], "Option one"),
25       H5Option(["value":"3"], "Option three"),
26       H5Option(["value":"4"], "Option four"),
27       H5Option(["value":"5"], "Option five")
28     )
29   ), `BS5FormLabel(["for":"inputSelect"], "Default select"),
30 BS5InputSelect("inputSelect", ["aria-label":"Default select"],
31   H5Option(["selected":"selected"], "Select option"),
32   H5Option(["value":"2"], "Option two"),
33   H5Option(["value":"1"], "Option one"),
34   H5Option(["value":"3"], "Option three"),
35   H5Option(["value":"4"], "Option four"),
36   H5Option(["value":"5"], "Option five")`, ``);
37 
38 auto sizesExample = demoBs5Example("sizes", "Sizes", 
39   H5Div(
40     H5H5(["text-muted", "mt-3"], "Small"),
41     BS5FormLabel(["for":"inputSelectSmall"], "Small select"),
42     BS5InputSelect("inputSelectSmall", ["form-select-sm"], ["aria-label":"Small select"],
43       H5Option(["selected":"selected"], "Select option"),
44       H5Option(["value":"1"], "Option one"),
45       H5Option(["value":"2"], "Option two"),
46       H5Option(["value":"3"], "Option three"),
47       H5Option(["value":"4"], "Option four"),
48       H5Option(["value":"5"], "Option five")),
49     H5H5(["text-muted", "mt-3"], "Large"),
50     BS5FormLabel(["for":"inputSelectLarge"], "Large select"),
51     BS5InputSelect("inputSelectLarge", ["form-select-lg"], ["aria-label":"Large select"],
52       H5Option(["selected":"selected"], "Select option"),
53       H5Option(["value":"1"], "Option one"),
54       H5Option(["value":"2"], "Option two"),
55       H5Option(["value":"3"], "Option three"),
56       H5Option(["value":"4"], "Option four"),
57       H5Option(["value":"5"], "Option five"))
58   ), `    BS5FormLabel(["for":"inputSelectSmall"], "Small select"),
59 BS5InputSelect("inputSelectSmall", ["form-select-sm"], ["aria-label":"Small select"],
60   H5Option(["selected":"selected"], "Select option"),
61   H5Option(["value":"1"], "Option one"),
62   H5Option(["value":"2"], "Option two"),
63   H5Option(["value":"3"], "Option three"),
64   H5Option(["value":"4"], "Option four"),
65   H5Option(["value":"5"], "Option five")),
66 BS5FormLabel(["for":"inputSelectLarge"], "Large select"),
67 BS5InputSelect("inputSelectLarge", ["form-select-lg"], ["aria-label":"Large select"],
68   H5Option(["selected":"selected"], "Select option"),
69   H5Option(["value":"1"], "Option one"),
70   H5Option(["value":"2"], "Option two"),
71   H5Option(["value":"3"], "Option three"),
72   H5Option(["value":"4"], "Option four"),
73   H5Option(["value":"5"], "Option five"))`, ``);
74 
75 auto multipleExample = demoBs5Example("multiple", "Multiple", 
76   H5Div(
77     BS5FormLabel(["for":"inputSelectMultiple"], "Multiple select"),
78     BS5InputSelect("inputSelectMultiple", ["multiple":"multiple", "aria-label":"Multiple select"],
79       H5Option(["value":"1"], "Option one"),
80       H5Option(["value":"2"], "Option two"),
81       H5Option(["value":"3"], "Option three"),
82       H5Option(["value":"4"], "Option four"),
83       H5Option(["value":"5"], "Option five"))
84   ), `BS5FormLabel(["for":"inputSelectMultiple"], "Multiple select"),
85 BS5InputSelect("inputSelectMultiple", ["multiple":"multiple", "aria-label":"Multiple select"],
86   H5Option(["value":"1"], "Option one"),
87   H5Option(["value":"2"], "Option two"),
88   H5Option(["value":"3"], "Option three"),
89   H5Option(["value":"4"], "Option four"),
90   H5Option(["value":"5"], "Option five"))`, ``);
91 
92 auto visibleExample = demoBs5Example("visible", "Visible options", 
93   H5Div(
94     BS5FormLabel(["for":"inputSelectSize"], "Select with size"),
95     BS5InputSelect("inputSelectSize", ["size":"3", "aria-label":"Select with size"],
96       H5Option(["value":"1"], "Option one"),
97       H5Option(["value":"2"], "Option two"),
98       H5Option(["value":"3"], "Option three"),
99       H5Option(["value":"4"], "Option four"),
100       H5Option(["value":"5"], "Option five"))
101   ), `BS5FormLabel(["for":"inputSelectSize"], "Select with size"),
102 BS5InputSelect("inputSelectSize", ["size":"3", "aria-label":"Select with size"],
103   H5Option(["value":"1"], "Option one"),
104   H5Option(["value":"2"], "Option two"),
105   H5Option(["value":"3"], "Option three"),
106   H5Option(["value":"4"], "Option four"),
107   H5Option(["value":"5"], "Option five"))`, ``);
108 
109         return 
110 H5Main(["style":"margin-top:70px;"], 
111   H5Div(["container-fluid", "mt-3", "bg-light"],
112     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 
113     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Select")),
114 
115   BS5Container(["mt-3"]).row(
116     H5Div(["col-12", "col-lg-2"], 
117       listLevels("basic"),
118       listAreas("basic", "forms"),
119       listSections("basic", "forms", "select")),
120     H5Div(["col-12", "col-lg-8"], 
121       dateInfo(this),
122       H5H2(["display-4"], "Select"),
123       H5Hr,
124 
125       defaultExample,
126       sizesExample,
127       multipleExample,
128       visibleExample
129 
130     ),
131     H5Div(["col-12", "col-lg-2"]))).toString;
132     }
133   });
134 }