source.uim.bootstrap.bs5.demos.layouts.container source code

1 module source.uim.bootstrap.bs5.demos.layouts.container;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/layouts/container", 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": "Container - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18       return 
19 H5Main(["style":"margin-top:70px;"], 
20   H5Div(["container-fluid", "mt-3", "bg-light"],
21     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/layouts"], 
22     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Layouts"], "Container")),
23 
24   BS5Container(["mt-3"]).row(
25     H5Div(["col-12", "col-lg-2"], 
26       listLevels("basic"),
27       listAreas("basic", "layouts"),
28       listSections("basic", "layouts", "container")),
29     H5Div(["col-12", "col-lg-8"], 
30       dateInfo(this),
31       H5H2(["display-4"], "Container"),
32       H5Hr,
33 
34       demoBs5Example("default", "Default",
35         H5Div(
36           BS5Container(
37             "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. 
38             Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. 
39             Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi.")
40         ), ``, ``),
41 
42       demoBs5Example("responsive", "Responsive",
43         H5Div(
44           H5H5(["text-muted", "mt-3",  "container"], "Small"),
45           H5Div(["container-sm"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi."),
46           H5H5(["text-muted", "mt-3", "container"], "Medium"),
47           H5Div(["container-md"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi."),
48           H5H5(["text-muted", "mt-3", "container"], "Large"),
49           H5Div(["container-lg"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi."),
50           H5H5(["text-muted", "mt-3", "container"], "Extra large"),
51           H5Div(["container-xl"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi."),
52           H5H5(["text-muted", "mt-3", "container"], "Extra extra large"),
53           H5Div(["container-xxl"], "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi."),
54         ), ``, ``),
55 
56       demoBs5Example("fluid", "Fluid",
57         H5Div(
58           H5Div(["container-fluid"],
59           "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo. Praesent nec egestas neque. Integer a ipsum et ante volutpat rhoncus. Pellentesque ultrices metus eget quam malesuada, sed faucibus nisi fringilla. Nunc eget turpis in turpis molestie malesuada a non sapien. Nullam auctor, tellus malesuada convallis accumsan, felis ex ultrices neque, quis tincidunt felis orci id nisi.")
60         ), ``, ``),
61 
62      ),
63     H5Div(["col-12", "col-lg-2"]))).toString;
64     }
65   });
66 }