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

1 module source.uim.bootstrap.bs5.demos.forms.floatinglabels;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/forms/floatinglabels", 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": "Floating Labels - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "Default", 
20   H5Div(
21     H5Div(["form-floating"],
22       BS5InputText("floatingLabelDefault", ["placeholder":"Text input placeholder"]),
23       BS5FormLabel(["for":"floatingLabelDefault"], "Text input label")
24     )
25   ), ``, ``);
26 
27 auto valueExample = demoBs5Example("value", "With value", 
28   H5Div(
29     H5Div(["form-floating"],
30       BS5InputText("floatingLabelValue", ["placeholder":"Text input placeholder", "value":"Text input value"]),
31       BS5FormLabel(["for":"floatingLabelValue"], "Text input label"))
32   ), ``, ``);
33 
34 auto validationExample = demoBs5Example("validation", "Validation", 
35   H5Div(
36     H5Div(["form-floating"],
37       BS5InputText("floatingLabelValidation", ["is-valid"], ["placeholder":"Text input placeholder", "value":"Text input value"]),
38       BS5FormLabel(["for":"floatingLabelValidation"], "Text input label")
39     )
40   ), ``, ``);
41 
42 auto textareaExample = demoBs5Example("textarea", "Textarea", 
43   H5Div(
44     H5H5(["text-muted", "mt-3"], "Default"),
45     H5Div(["form-floating"],
46       H5Textarea("floatingLabelTextareaDefault", ["form-control"], ["placeholder":"Textarea placeholder"]),
47       BS5FormLabel(["for":"floatingLabelTextareaDefault"], "Textarea label")
48     ),
49     H5H5(["text-muted", "mt-3"], "Custom height"),
50     H5Div(["form-floating"],
51       H5Textarea("floatingLabelTextareaHeight", ["form-control"], ["placeholder":"Textarea placeholder", "style":"height: 100px;"]),
52       BS5FormLabel(["for":"floatingLabelTextareaHeight"], "Textarea label")
53     )
54   ), ``, ``);
55 
56 auto selectExample = demoBs5Example("select", "Select", 
57   H5Div(   
58     H5Div(["form-floating"],
59       BS5InputSelect("floatingLabelSelect", ["aria-label":"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       ),
67       BS5FormLabel(["for":"floatingLabelSelect"], "Select label")
68     )
69   ), ``, ``);
70 
71        return 
72 H5Main(["style":"margin-top:70px;"], 
73   H5Div(["container-fluid", "mt-3", "bg-light"],
74     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 
75     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Floating Labels")),
76 
77   BS5Container(["mt-3"]).row(
78     H5Div(["col-12", "col-lg-2"], 
79       listLevels("basic"),
80       listAreas("basic", "forms"),
81       listSections("basic", "forms", "floatinglabels")),
82     H5Div(["col-12", "col-lg-8"], 
83       dateInfo(this),
84       H5H2(["display-4"], "Floating Labels"),
85       H5Hr,
86 
87       defaultExample, 
88       valueExample, 
89       validationExample, 
90       textareaExample, 
91       selectExample
92 
93     ),
94     H5Div(["col-12", "col-lg-2"]))).toString;
95     }
96   });
97 }
98 
99