source.uim.bootstrap.bs5.demos.utilities.sizing source code

1 module source.uim.bootstrap.bs5.demos.utilities.sizing;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/sizing", 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": "Sizing - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto relativeExample = demoBs5Example("relative", "Relative to parent", 
20   H5Div(
21     H5H5(["text-muted", "mt-3"], "Width"),
22     H5Div(["bg-secondary"],
23       H5Div(["bg-light", "p-2", "w-25"], "Width 25%"),
24       H5Div(["bg-light", "p-2", "w-50"], "Width 50%"),
25       H5Div(["bg-light", "p-2", "w-75"], "Width 75%"),
26       H5Div(["bg-", "p-2", "w-100"], "Width 100%")
27     ),
28     H5H5(["text-muted", "mt-3"], "Height"),
29     H5Div(["bg-secondary", "d-flex", "justify-content-between"], ["style":"height: 200px;"],
30       H5Div(["bg-light", "p-2", "h-25"], "Height 25%"),
31       H5Div(["bg-light", "p-2", "h-50"], "Height 50%"),
32       H5Div(["bg-light", "p-2", "h-75"], "Height 75%"),
33       H5Div(["bg-light", "p-2", "h-100"], "Height 100%")
34     )
35   ), ``, ``);
36 
37 auto maxExample = demoBs5Example("max", "Max width and height", 
38   H5Div(
39     H5H5(["text-muted", "mt-3"], "Max-width"),
40     H5Img(["mw-100"], ["src":"/img/600x200.png", "alt":"Max-width = 100%"]), 
41     H5H5(["text-muted", "mt-3"], "Max-height"),
42     H5Div(["style":"height: 400px;"],
43       H5Img(["mh-100"], ["src":"/img/200x600.png", "alt":"Max-height = 100%"]) 
44     )
45   ), ``, ``);
46 
47 auto viewportExample = demoBs5Example("viewport", "Relative to viewport", 
48   H5Div(
49     H5H5(["text-muted", "mt-3"], "Width"),
50     H5Img(["vw-100"], ["src":"/img/1000x200.png", "alt":"Width 100vw"]), 
51     H5H5(["text-muted", "mt-3"], "Min-width"),
52     H5Img(["min-vw-100"], ["src":"/img/1000x200.png", "alt":"Min-width 100vw"]),
53     H5H5(["text-muted", "mt-3"], "Height"),
54     H5Img(["vh-100"], ["src":"/img/200x2000.png", "alt":"Height 100vh"]), 
55     H5H5(["text-muted", "mt-3"], "Min-height"),
56     H5Img(["min-vh-100"], ["src":"/img/200x2000.png", "alt":"Min-height 100vh"]) 
57   ), ``, ``);
58    
59       return 
60 H5Main(["style":"margin-top:70px;"], 
61   H5Div(["container-fluid", "mt-3", "bg-light"],
62     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
63     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Sizing")),
64   BS5Container(["mt-3"]).row(
65     H5Div(["col-12", "col-lg-2"], 
66       listLevels("basic"),
67       listAreas("basic", "utilities"),
68       listSections("basic", "utilities", "sizing")),
69     H5Div(["col-12", "col-lg-8"], 
70       dateInfo(this),
71       H5H2(["display-4"], "Sizing"),
72       H5Hr,
73 
74       relativeExample, 
75       maxExample, 
76       viewportExample
77 
78     ),
79     H5Div(["col-12", "col-lg-2"]))).toString;
80     }
81   });
82 }   
83 
84