source.uim.bootstrap.bs5.demos.contents.figures source code

1 module source.uim.bootstrap.bs5.demos.contents.figures;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/contents/figures", 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": "Figures - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "Default", 
20   H5Div(
21     H5Figure(["figure"],
22       H5Img(["figure-img", "img-fluid"], ["src":"/img/600x400.png", "alt":"Figure image"]),
23       H5Figcaption(["figure-caption"], "Caption for the figure.")
24     )
25   ), ``, ``);
26 
27 auto alignmentExample = demoBs5Example("alignment", "Alignment", 
28   H5Div(
29     H5H5(["text-muted", "mt-3"], "Center"),
30     H5Figure(["figure"],
31       H5Img(["figure-img", "img-fluid"], ["src":"/img/600x400.png", "alt":"Figure image"]),
32       H5Figcaption(["figure-caption text-center"], "Caption for the figure.")
33     ),
34     H5H5(["text-muted", "mt-3"], "Right"),
35     H5Figure(["figure"],
36       H5Img(["figure-img", "img-fluid"], ["src":"/img/600x400.png" , "alt":"Figure image"]),
37       H5Figcaption(["figure-caption", "text-end"], "Caption for the figure.")
38     )
39   ), ``, ``);
40 
41       return 
42 H5Main(["style":"margin-top:70px;"], 
43   H5Div(["container-fluid", "mt-3", "bg-light"],
44     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/contents"], 
45     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Contents"], "Figures")),
46 
47   BS5Container(["mt-3"]).row(
48     H5Div(["col-12", "col-lg-2"], 
49       listLevels("basic"),
50       listAreas("basic", "contents"),
51       listSections("basic", "contents", "figures")),
52     H5Div(["col-12", "col-lg-8"], 
53       dateInfo(this),
54       H5H2(["display-4"], "Figures"),
55       H5Hr,
56 
57       defaultExample, 
58       alignmentExample
59 
60     ),
61     H5Div(["col-12", "col-lg-2"]))).toString;
62     }
63   });
64 }