source.uim.bootstrap.bs5.demos.utilities.float

1 module source.uim.bootstrap.bs5.demos.utilities.float_;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/float", 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": "Float - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "Default", 
20   H5Div(
21     H5Div(["float-start"], "Float left"), H5Br,
22     H5Div(["float-end"], "Float right"), H5Br,
23     H5Div(["float-none"], "Don't float"), H5Br
24   ), ``, ``);
25 
26 auto responsiveExample = demoBs5Example("responsive", "Responsive", 
27   H5Div(
28     H5H5(["text-muted", "mt-3"], "Float left"),
29     H5Div(["float-sm-start"], "Float left for breakpoints sm and up"), H5Br,
30     H5Div(["float-md-start"], "Float left for breakpoints md and up"), H5Br,
31     H5Div(["float-lg-start"], "Float left for breakpoints lg and up"), H5Br,
32     H5Div(["float-xl-start"], "Float left for breakpoints xl and up"), H5Br,
33     H5Div(["float-xxl-start"], "Float left for breakpoints xxl and up"), H5Br,
34     H5H5(["text-muted", "mt-3"], "Float right"),
35     H5Div(["float-sm-end"], "Float right for breakpoints sm and up"), H5Br,
36     H5Div(["float-md-end"], "Float right for breakpoints md and up"), H5Br,
37     H5Div(["float-lg-end"], "Float right for breakpoints lg and up"), H5Br,
38     H5Div(["float-xl-end"], "Float right for breakpoints xl and up"), H5Br,
39     H5Div(["float-xxl-end"], "Float right for breakpoints xxl and up"), H5Br,
40     H5H5(["text-muted", "mt-3"], "Float none"),
41     H5Div(["float-sm-none"], "Don't float for breakpoints sm and up"), H5Br,
42     H5Div(["float-md-none"], "Don't float for breakpoints md and up"), H5Br,
43     H5Div(["float-lg-none"], "Don't float for breakpoints lg and up"), H5Br,
44     H5Div(["float-xl-none"], "Don't float for breakpoints xl and up"), H5Br,
45     H5Div(["float-xxl-none"], "Don't float for breakpoints xxl and up"), H5Br
46   ), ``, ``);
47 
48       return 
49 H5Main(["style":"margin-top:70px;"], 
50   H5Div(["container-fluid", "mt-3", "bg-light"],
51     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
52     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Float")),
53   BS5Container(["mt-3"]).row(
54     H5Div(["col-12", "col-lg-2"], 
55       listLevels("basic"),
56       listAreas("basic", "utilities"),
57       listSections("basic", "utilities", "float")),
58     H5Div(["col-12", "col-lg-8"], 
59       dateInfo(this),
60       H5H2(["display-4"], "Float"),
61       H5Hr,
62 
63       defaultExample, 
64       responsiveExample
65       
66     ),
67     H5Div(["col-12", "col-lg-2"]))).toString;
68     }
69   });
70 }