1 module uim.bootstrap.bs5.demos.components.closebuttons;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/closebuttons", 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": "Close Buttons - Bootstrap 5 Demo",
14       ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto defaultExample = demoBs5Example("default", "Default", 
20   H5Div(
21     BS5Alert(["alert-success"], 
22       H5Button(["btn-close"], ["type":"button", "aria-label":"Close"]))
23   ), 
24 `BS5Alert(["alert-success"], 
25   H5Button(["btn-close"], ["type":"button", "aria-label":"Close"]))`, 
26 `H5Div(["alert alert-success" role="alert"]
27   H5Button(["type":"button" ["btn-close" "aria-label":"Close"]")
28 )`);
29 
30 auto disabledExample = demoBs5Example("disabled", "Disabled", 
31   H5Div(
32     BS5Alert(["alert-success"], 
33       H5Button(["btn-close"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]))
34       ), 
35 `BS5Alert(["alert-success"], 
36   H5Button(["btn-close"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]))`, 
37             `H5Div(["alert alert-success" role="alert"]
38   H5Button(["type":"button" ["btn-close" "aria-label":"Close" disabled=""]")
39 )`);
40 
41 auto darkExample = demoBs5Example("dark", "Disabled", 
42   H5Div(
43     BS5Alert(["bg-dark"], 
44       H5Button(["btn-close", "btn-close-white"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]), 
45       H5Button(["btn-close", "btn-close-white"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]))
46       ), 
47       `BS5Alert(["bg-dark"], 
48   H5Button(["btn-close", "btn-close-white"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]), 
49   H5Button(["btn-close", "btn-close-white"], ["type":"button", "aria-label":"Close", "disabled":"disabled"]))`, 
50       `H5Div(["alert bg-dark" role="alert"]
51   H5Button(["type":"button" ["btn-close btn-close-white" "aria-label":"Close"]")
52   H5Button(["type":"button" ["btn-close btn-close-white" "aria-label":"Close" disabled=""]")
53 )`);
54 
55       return 
56 H5Main(["style":"margin-top:70px;"], 
57   H5Div(["container-fluid", "mt-3", "bg-light"],
58     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 
59     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Close Buttons")),
60   BS5Container(["mt-3"]).row(
61     H5Div(["col-12", "col-lg-2"], 
62       listLevels("basic"),
63       listAreas("basic", "components"),
64       listSections("basic", "components", "closebuttons")),
65     H5Div(["col-12", "col-lg-8"], 
66       dateInfo(this),
67       H5H2(["display-4"], "Close Buttons"),
68       H5Hr,
69 
70       defaultExample,
71       disabledExample,
72       darkExample
73 
74     ))).toString;
75     }
76   });
77 }