source.uim.bootstrap.bs5.demos.utilities.display source code

1 module source.uim.bootstrap.bs5.demos.utilities.display;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/utilities/display", 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": "Display - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17      override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "None", 
20   H5Div(
21     H5Div(["d-none"], "Display none")
22   ), ``, ``);
23 
24 auto inlineExample = demoBs5Example("Inline", "Inline and block", 
25   H5Div(
26     H5Div(["d-inline", "bg-secondary", "text-white p-2"], "Display inline"),
27     H5Div(["d-inline", "bg-secondary", "text-white p-2"], "Display inline"),
28     H5Br,H5Br,
29     H5Span(["d-block", "bg-secondary", "text-white p-2"], "Display block"),
30     H5Br,
31     H5Div(["d-inline-block", "bg-secondary", "text-white p-2"],
32       H5H4(["Inline-block"], "Display inline-block")
33     ),
34     H5Div(["d-inline-block", "bg-secondary", "text-white p-2"],
35       H5H4(["Inline-block"], "Display inline-block")
36     )
37   ), ``, ``);
38 
39 auto gridExample = demoBs5Example("grid", "Grid", 
40   H5Div(
41     H5Div(["d-grid"], "Display grid")
42   ), ``, ``);
43 
44 auto tableExample = demoBs5Example("table", "Table", 
45   H5Div(
46     H5Div(["d-table"], "Display table"),
47     H5Div(["d-table-row"], "Display table-row"),
48     H5Div(["d-table-cell"], "Display table-cell")
49   ), ``, ``);
50 
51 auto flexExample = demoBs5Example("flex", "Flex", 
52   H5Div(
53     H5Div(["d-flex"], "Display flex"),
54     H5Div(["d-inline-flex"], "Display inline-flex")
55   ), ``, ``);
56 
57 auto displayExample = demoBs5Example("display", "Responsive display none", 
58   H5Div(
59     H5Div(["d-sm-none"], "Display none for breakpoints sm and up"),
60     H5Div(["d-md-none"], "Display none for breakpoints md and up"),
61     H5Div(["d-lg-none"], "Display none for breakpoints lg and up"),
62     H5Div(["d-xl-none"], "Display none for breakpoints xl and up"),
63     H5Div(["d-xxl-none"], "Display none for breakpoints xxl and up")
64   ), ``, ``);
65 
66 auto printExample = demoBs5Example("print", "Print", 
67   H5Div(
68     H5Div(["d-print-none"], "Display none for print"),
69     H5Div(["d-print-inline"], "Display inline for print"),
70     H5Div(["d-print-block"], "Display block for print"),
71     H5Div(["d-print-inline-block"], "Display inline-block for print"),
72     H5Div(["d-print-grid"], "Display grid for print"),
73     H5Div(["d-print-table"], "Display table for print"),
74     H5Div(["d-print-table-row"], "Display table-row for print"),
75     H5Div(["d-print-table-cell"], "Display table-cell for print"),
76     H5Div(["d-print-flex"], "Display flex for print"),
77     H5Div(["d-print-inline-flex"], "Display inline-flex for print")
78   ), ``, ``);
79 
80       return 
81 H5Main(["style":"margin-top:70px;"], 
82   H5Div(["container-fluid", "mt-3", "bg-light"],
83     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/utilities"], 
84     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Utilities"], "Display")),
85   BS5Container(["mt-3"]).row(
86     H5Div(["col-12", "col-lg-2"], 
87       listLevels("basic"),
88       listAreas("basic", "utilities"),
89       listSections("basic", "utilities", "display")),
90     H5Div(["col-12", "col-lg-8"], 
91       dateInfo(this),
92       H5H2(["display-4"], "Display"),
93       H5Hr,
94 
95       defaultExample, 
96       inlineExample, 
97       gridExample, 
98       tableExample, 
99       flexExample, 
100       displayExample, 
101       printExample
102 
103     ),
104     H5Div(["col-12", "col-lg-2"]))).toString;
105     }
106   });
107 }