1 module source.uim.bootstrap.bs5.demos.utilities.verticalalign;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/verticalalign", 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": "Vertical Align - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto inlineExample = demoBs5Example("inline", "Inline and inline-block", 
20   H5Div(
21 /*     H5H1("BaselineH5Img(["src":"/img/20x20.png" ["align-baseline"])
22     H5H1("Text-topH5Img(["src":"/img/20x20.png" ["align-text-top"])
23     H5H1("Text-bottomH5Img(["src":"/img/20x20.png" ["align-text-bottom"])
24     H5H1("TopH5Img(["src":"/img/20x20.png" ["align-top"])
25     H5H1("MiddleH5Img(["src":"/img/20x20.png" ["align-middle"])
26     H5H1("BottomH5Img(["src":"/img/20x20.png" ["align-bottom"]) */
27   ), ``, ``);
28 
29 auto cellExample = demoBs5Example("cell", "Table cell", 
30   H5Div(
31     H5P("Text-top and text-bottom not applicable on table cells"),
32     H5Table(["table"], ["style":"height: 200px;"],
33       H5Tbody(
34         H5Tr(
35           H5Td(["align-baseline"], "Baseline"),
36           H5Td(["align-top"], "Top"),
37           H5Td(["align-middle"], "Middle"),
38           H5Td(["align-bottom"], "Bottom")
39         )
40       )
41     )
42   ), ``, ``); 
43 
44             return 
45 H5Main(["style":"margin-top:70px;"], 
46   H5Div(["container-fluid", "mt-3", "bg-light"],
47     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
48     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Vertical Align")),
49   BS5Container(["mt-3"]).row(
50     H5Div(["col-12", "col-lg-2"], 
51       listLevels("basic"),
52       listAreas("basic", "utilities"),
53       listSections("basic", "utilities", "verticalalign")),
54     H5Div(["col-12", "col-lg-8"], 
55       dateInfo(this),
56       H5H2(["display-4"], "Vertical Align"),
57       H5Hr,
58 
59       inlineExample, 
60       cellExample 
61     ),
62     H5Div(["col-12", "col-lg-2"]))).toString;
63     }
64   });
65 }