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

1 module source.uim.bootstrap.bs5.demos.contents.images;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/contents/images", 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": "Images - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto customExample = demoBs5Example("custom", "Default", 
20   H5Div(
21     H5H5(["text-muted", "mt-3"], "300x200"),
22     H5Img(["src":"/img/demos/robot1_300x200.jpg", "alt":"Small image"]),
23     H5H5(["text-muted", "mt-3"], "600x400"),
24     H5Img(["src":"/img/demos/robot1_600x400.jpg", "alt":"Bigger image"])
25   ), `H5Img(["src":"/img/demos/robot1_300x200.jpg", "alt":"Small image"])
26 H5Img(["src":"/img/demos/robot1_600x400.jpg", "alt":"Bigger image"])`, ``);
27 
28 auto responsiveExample = demoBs5Example("responsive", "Responsive", 
29   H5Div(
30     H5H5(["text-muted", "mt-3"], "300x200"),
31     H5Img(["img-fluid"], ["src":"/img/demos/robot2_300x200.jpg", "alt":"Small responsive image"]),
32     H5H5(["text-muted", "mt-3"], "1200x800"),
33     H5Img(["img-fluid"], ["src":"/img/demos/robot2_1200x800.jpg", "alt":"Large responsive image"])
34   ), `H5Img(["img-fluid"], ["src":"/img/demos/robot2_300x200.jpg", "alt":"Small responsive image"]),
35   H5Img(["img-fluid"], ["src":"/img/demos/robot2_1200x800.jpg", "alt":"Large responsive image"])`, ``);
36 
37 auto roundedExample = demoBs5Example("rounded", "Rounded", 
38   H5Div(
39     H5H5(["text-muted", "mt-3"], "300x200"),
40     H5Img(["rounded"], ["src":"/img/demos/robot3_300x200.jpg", "alt":"Small image with rounded corners"]),
41     H5H5(["text-muted", "mt-3"], "1200x800"),
42     H5Img(["rounded"], ["src":"/img/demos/robot3_1200x800.jpg", "alt":"Big image with rounded corners"])
43   ), `H5Img(["rounded"], ["src":"/img/demos/robot3_300x200.jpg", "alt":"Small image with rounded corners"])
44   H5Img(["rounded"], ["src":"/img/demos/robot3_1200x800.jpg", "alt":"Big image with rounded corners"])`, ``);
45 
46 auto thumbnailExample = demoBs5Example("thumbnail", "Thumbnail", 
47   H5Div(
48     H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image thumbnail"])
49   ), `H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image thumbnail"])`, ``);
50 
51 auto alignmentExample = demoBs5Example("alignment", "Alignment", 
52   H5Div(
53     H5H5(["text-muted", "mt-3"], "Float"),
54     H5Div(["clearfix"],
55       H5Img(["float-start"], ["src":"/img/100x100.png", "alt":"Image floated left"]),
56       H5Img(["float-end"], ["src":"/img/100x100.png", "alt":"Image floated right"])
57     ),
58     H5H5(["text-muted", "mt-3"], "Spacing utilities"),
59     H5Img(["d-block"], ["src":"/img/100x100.png", "alt":"Left-aligned image"]),
60     H5Img(["d-block mx-auto"], ["src":"/img/100x100.png", "alt":"Centered image"]) ,
61     H5Img(["d-block ms-auto"], ["src":"/img/100x100.png", "alt":"Right-aligned image"]),
62     H5H5(["text-muted", "mt-3"], "Text alignment"),
63     H5Div(["text-start"],
64       H5Img(["src":"/img/100x100.png", "alt":"Left-aligned image"])
65     ),
66     H5Div(["text-center"],
67       H5Img(["src":"/img/100x100.png", "alt":"Centered image"])
68     ),
69     H5Div(["text-end"],
70       H5Img(["src":"/img/100x100.png", "alt":"Right-aligned image"])
71     )
72   ), `H5H5(["text-muted", "mt-3"], "Float"),
73   H5Div(["clearfix"],
74     H5Img(["float-start"], ["src":"/img/100x100.png", "alt":"Image floated left"]),
75     H5Img(["float-end"], ["src":"/img/100x100.png", "alt":"Image floated right"])
76   ),
77   H5H5(["text-muted", "mt-3"], "Spacing utilities"),
78   H5Img(["d-block"], ["src":"/img/100x100.png", "alt":"Left-aligned image"]),
79   H5Img(["d-block mx-auto"], ["src":"/img/100x100.png", "alt":"Centered image"]) ,
80   H5Img(["d-block ms-auto"], ["src":"/img/100x100.png", "alt":"Right-aligned image"]),
81   H5H5(["text-muted", "mt-3"], "Text alignment"),
82   H5Div(["text-start"],
83     H5Img(["src":"/img/100x100.png", "alt":"Left-aligned image"])
84   ),
85   H5Div(["text-center"],
86     H5Img(["src":"/img/100x100.png", "alt":"Centered image"])
87   ),
88   H5Div(["text-end"],
89     H5Img(["src":"/img/100x100.png", "alt":"Right-aligned image"])
90   )`, ``);
91 
92 auto pictureExample = demoBs5Example("picture", "Picture element", 
93   H5Div(
94     H5H1(["picture"],
95       H5H1(["source"], ["srcset":"/img/100x100.png"]),
96       H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image in picture tag"])
97     ),
98     H5H1(["/picture"])
99   ), `H5H1(["picture"],
100   H5H1(["source"], ["srcset":"/img/100x100.png"]),
101   H5Img(["img-thumbnail"], ["src":"/img/100x100.png", "alt":"Image in picture tag"])
102 ),
103 H5H1(["/picture"])`, ``);
104 
105       return 
106 H5Main(["style":"margin-top:70px;"], 
107   H5Div(["container-fluid", "mt-3", "bg-light"],
108     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/contents"], 
109     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Contents"], "Images")),
110 
111   BS5Container(["mt-3"]).row(
112     H5Div(["col-12", "col-lg-2"], 
113       listLevels("basic"),
114       listAreas("basic", "contents"),
115       listSections("basic", "contents", "images")),
116     H5Div(["col-12", "col-lg-8"], 
117       dateInfo(this),
118       H5H2(["display-4"], "Images"),
119       H5Hr,
120 
121       customExample, 
122       responsiveExample, 
123       roundedExample, 
124       thumbnailExample, 
125       alignmentExample, 
126       pictureExample
127 
128     ),
129     H5Div(["col-12", "col-lg-2"]))).toString;
130     }
131   });
132 }
133