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

1 module source.uim.bootstrap.bs5.demos.contents.tables;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/contents/tables", 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": "Tables - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "Default", 
20   H5Div(
21     H5Img(["src":"/img/300x200.png", "alt":"Normal image"])
22   ), ``, ``);
23 
24 auto responsiveExample = demoBs5Example("responsive", "Responsive", 
25   H5Div(
26     H5Img(["img-fluid"], ["src":"/img/1200x600.png", "alt":"Responsive image"]) 
27   ), ``, ``);
28 
29 auto roundedExample = demoBs5Example("rounded", "Rounded", 
30   H5Div(
31     H5Img(["rounded"], ["src":"/img/300x200.png", "alt":"Image with rounded corners"])
32   ), ``, ``);
33 
34 auto thumbnailExample = demoBs5Example("thumbnail", "Thumbnail", 
35   H5Div(
36     H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image thumbnail"])
37   ), ``, ``);
38 
39 auto alignmentExample = demoBs5Example("alignment", "Alignment", 
40   H5Div(
41     H5H5(["text-muted", "mt-3"], "Float"),
42     H5Div(["clearfix"],
43       H5Img(["float-start"], ["src":"/img/100x100.png", "alt":"Image floated left"]), 
44       H5Img(["float-end"], ["src":"/img/100x100.png", "alt":"Image floated right"]),
45     ),
46     H5H5(["text-muted", "mt-3"], "Spacing utilities"),
47     H5Img(["d-block"], ["src":"/img/100x100.png", "alt":"Left-aligned image"]), 
48     H5Img(["d-block mx-auto"], ["src":"/img/100x100.png", "alt":"Centered image"]), 
49     H5Img(["d-block ms-auto"], ["src":"/img/100x100.png", "alt":"Right-aligned image"]), 
50     H5H5(["text-muted", "mt-3"], "Text alignment"),
51     H5Div(["text-start"],
52       H5Img(["src":"/img/100x100.png", "alt":"Left-aligned image"]),
53     ),
54     H5Div(["text-center"],
55       H5Img(["src":"/img/100x100.png", "alt":"Centered image"]),
56     ),
57     H5Div(["text-end"],
58       H5Img(["src":"/img/100x100.png", "alt":"Right-aligned image"]),
59     )
60   ), ``, ``);
61 
62 auto pictureExample = demoBs5Example("picture", "Picture element", 
63   H5Div(
64     H5Picture(
65       H5Source(["srcset":"/img/100x100.png"]),
66       H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image in picture tag"])
67     )
68   ), ``, ``);
69 
70       return 
71 H5Main(["style":"margin-top:70px;"], 
72   H5Div(["container-fluid", "mt-3", "bg-light"],
73     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/contents"], 
74     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Contents"], "Tables")),
75 
76   BS5Container(["mt-3"]).row(
77     H5Div(["col-12", "col-lg-2"], 
78       listLevels("basic"),
79       listAreas("basic", "contents"),
80       listSections("basic", "contents", "tables")),
81     H5Div(["col-12", "col-lg-8"], 
82       dateInfo(this),
83       H5H2(["display-4"], "Tables"),
84       H5Hr,
85 
86       defaultExample,
87       responsiveExample,
88       roundedExample,
89       thumbnailExample,
90       alignmentExample,
91       pictureExample
92 
93     ),
94     H5Div(["col-12", "col-lg-2"]))).toString;
95     }
96   });
97 }
98