uim.bootstrap.bs5.demos.components.spinners source code

1 module uim.bootstrap.bs5.demos.components.spinners;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/spinners", 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": "Spinners - Bootstrap 5 Demo",
14           ]);
15 		} 
16 			
17     override string content() { 
18 
19 auto borderExample = demoBs5Example("border", "Border spinner", 
20   H5Div(
21     BS5SpinnerBorder(["role":"status"], 
22       H5Span(["visually-hidden"], "Loading..."))
23       ), `BS5SpinnerBorder(["role":"status"], 
24       H5Span(["visually-hidden"], "Loading..."))`, ``);
25 
26 auto growingExample = demoBs5Example("growing", "Growing spinner", 
27   H5Div(
28     BS5SpinnerGrow(["role":"status"], 
29       H5Span(["visually-hidden"], "Loading..."))
30       ), `BS5SpinnerGrow(["role":"status"], 
31       H5Span(["visually-hidden"], "Loading..."))`, ``);
32 
33 auto colorsExample = demoBs5Example("colors", "Colors Border", 
34   H5Div(
35     BS5SpinnerBorder(["text-primary"], ["role":"status"], 
36       H5Span(["visually-hidden"], "Loading...")),
37     BS5SpinnerBorder(["text-secondary"], ["role":"status"], 
38       H5Span(["visually-hidden"], "Loading...")),
39     BS5SpinnerBorder(["text-success"], ["role":"status"], 
40       H5Span(["visually-hidden"], "Loading...")),
41     BS5SpinnerBorder(["text-danger"], ["role":"status"], 
42       H5Span(["visually-hidden"], "Loading...")),
43     BS5SpinnerBorder(["text-warning"], ["role":"status"], 
44       H5Span(["visually-hidden"], "Loading...")),
45     BS5SpinnerBorder(["text-info"], ["role":"status"], 
46       H5Span(["visually-hidden"], "Loading...")),
47     BS5SpinnerBorder(["text-light"], ["role":"status"], 
48       H5Span(["visually-hidden"], "Loading...")),
49     BS5SpinnerBorder(["text-dark"], ["role":"status"], 
50       H5Span(["visually-hidden"], "Loading..."))
51       ), ``, ``);
52 
53 auto colors2Example = demoBs5Example("colors2", "Colors Grow", 
54   H5Div(
55     BS5SpinnerGrow(["text-primary"], ["role":"status"], 
56       H5Span(["visually-hidden"], "Loading...")),
57     BS5SpinnerGrow(["text-secondary"], ["role":"status"], 
58       H5Span(["visually-hidden"], "Loading...")),
59     BS5SpinnerGrow(["text-success"], ["role":"status"], 
60       H5Span(["visually-hidden"], "Loading...")),
61     BS5SpinnerGrow(["text-danger"], ["role":"status"], 
62       H5Span(["visually-hidden"], "Loading...")),
63     BS5SpinnerGrow(["text-warning"], ["role":"status"], 
64       H5Span(["visually-hidden"], "Loading...")),
65     BS5SpinnerGrow(["text-info"], ["role":"status"], 
66       H5Span(["visually-hidden"], "Loading...")),
67     BS5SpinnerGrow(["text-light"], ["role":"status"], 
68       H5Span(["visually-hidden"], "Loading...")),
69     BS5SpinnerGrow(["text-dark"], ["role":"status"], 
70       H5Span(["visually-hidden"], "Loading..."))
71       ), ``, ``);
72 
73 auto sizingExample = demoBs5Example("sizing", "Sizing Border", 
74   H5Div(
75     BS5SpinnerBorder(["spinner-border-sm"], ["role":"status"], 
76       H5Span(["visually-hidden"], "Loading...")),
77     BS5SpinnerBorder(["role":"status"], 
78       H5Span(["visually-hidden"], "Loading...")),
79     BS5SpinnerBorder(["role":"status", "style":"width: 3rem; height: 3rem;"], 
80       H5Span(["visually-hidden"], "Loading..."))
81       ), `BS5SpinnerBorder(["spinner-border-sm"], ["role":"status"], 
82       H5Span(["visually-hidden"], "Loading...")),
83     BS5SpinnerBorder(["role":"status"], 
84       H5Span(["visually-hidden"], "Loading...")),
85     BS5SpinnerBorder(["role":"status", "style":"width: 3rem; height: 3rem;"], 
86       H5Span(["visually-hidden"], "Loading..."))`, ``);
87 
88 auto sizing2Example = demoBs5Example("sizing2", "Sizing Grow", 
89   H5Div(
90     BS5SpinnerGrow(["spinner-grow-sm"], ["role":"status"], 
91       H5Span(["visually-hidden"], "Loading...")),
92     BS5SpinnerGrow(["role":"status"], 
93       H5Span(["visually-hidden"], "Loading...")),
94     BS5SpinnerGrow(["role":"status", "style":"width: 3rem; height: 3rem;"], 
95       H5Span(["visually-hidden"], "Loading..."))
96       ), `BS5SpinnerGrow(["spinner-grow-sm"], ["role":"status"], 
97       H5Span(["visually-hidden"], "Loading...")),
98     BS5SpinnerGrow(["role":"status"], 
99       H5Span(["visually-hidden"], "Loading...")),
100     BS5SpinnerGrow(["role":"status", "style":"width: 3rem; height: 3rem;"], 
101       H5Span(["visually-hidden"], "Loading..."))`, ``);
102 
103 auto alignmentExample = demoBs5Example("alignment", "Alignment", 
104   H5Div(
105               // <p>Use <a href="spacing.html"]spacing</a>, <a href="flex.html"]flex</a>, <a href="float.html"]float</a> and <a href="text.html"]text</a> utilities to align and place your spinner as needed.")
106     H5H5(["text-muted", "mt-3"], "Margin"),
107     BS5SpinnerBorder(["m-3"], ["role":"status"], 
108       H5Span(["visually-hidden"], "Loading...")),
109     H5H5(["text-muted", "mt-3"], "Flex"),
110     H5Div(["d-flex justify-content-center"], 
111       BS5SpinnerBorder(["role":"status"],
112         H5Span(["visually-hidden"], "Loading..."))),
113     H5Div(["d-flex", "align-items-center"], 
114       H5Strong("Loading..."),
115       BS5SpinnerBorder(["ms-auto"], ["role":"status", "aria-hidden":"true"])),
116     H5H5(["text-muted", "mt-3"], "Float"),
117     H5Div(["clearfix"], 
118       BS5SpinnerBorder(["float-end"], ["role":"status"],
119         H5Span(["visually-hidden"], "Loading..."))),
120     H5H5(["text-muted", "mt-3"], "Text align"),
121     H5Div(["text-center"], 
122       H5Div(["spinner-border"], ["role":"status"],
123         H5Span(["visually-hidden"], "Loading...")))
124       ), ``, ``);
125 
126 
127       return 
128 H5Main(["style":"margin-top:70px;"], 
129   H5Div(["container-fluid", "mt-3", "bg-light"],
130     bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/components"], 
131     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Spinners")),
132 
133   BS5Container(["mt-3"]).row(
134     H5Div(["col-12", "col-lg-2"], 
135       listLevels("basic"),
136       listAreas("basic", "components"),
137       listSections("basic", "components", "spinners")),
138     H5Div(["col-12", "col-lg-8"], 
139       dateInfo(this),
140       H5H2(["display-4"], "Spinners"),
141       H5Hr,
142 
143       borderExample,
144       growingExample,
145       colorsExample,
146       colors2Example,
147       sizingExample,
148       sizing2Example,
149       alignmentExample
150 
151      ),
152     H5Div(["col-12", "col-lg-2"]))).toString;
153     }
154   });
155 }