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

1 module source.uim.bootstrap.bs5.demos.forms.range;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/forms/range", 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": "Range - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 auto defaultExample = demoBs5Example("default", "Default", 
19   H5Div(
20     BS5FormCheck(
21       BS5FormLabel(["for":"inputRange"], "Range input label"),
22       H5Input("inputRange", ["form-range"], ["type":"range"]))
23   ), ``, ``);
24 
25 auto minmaxExample = demoBs5Example("minmax", "MinMax", 
26   H5Div(
27     BS5FormLabel(["for":"inputRangeMinMax"], "Range input label"),
28     H5Input("inputRangeMinMax", ["form-range"], ["type":"range", "min":"0", "max":"10"])
29   ), ``, ``);
30 
31 auto stepsExample = demoBs5Example("steps", "With Steps", 
32   H5Div(
33     BS5FormLabel(["for":"inputRangeSteps"], "Range input label"),
34     H5Input("inputRangeSteps", ["form-range"], ["type":"range", "min":"0", "max":"10", "step":"0.5"])
35   ), ``, ``);
36 
37         return 
38 H5Main(["style":"margin-top:70px;"], 
39   H5Div(["container-fluid", "mt-3", "bg-light"],
40     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 
41     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Range")),
42 
43   BS5Container(["mt-3"]).row(
44     H5Div(["col-12", "col-lg-2"], 
45       listLevels("basic"),
46       listAreas("basic", "forms"),
47       listSections("basic", "forms", "range")),
48     H5Div(["col-12", "col-lg-8"], 
49       dateInfo(this),
50       H5H2(["display-4"], "Range"),
51       H5Hr,
52 
53       defaultExample,
54       minmaxExample,
55       stepsExample
56       
57     ),
58     H5Div(["col-12", "col-lg-2"]))).toString;
59     }
60   });
61 }