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

1 module uim.bootstrap.bs5.demos.components.badges;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/badges", 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": "Badges - 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/components"], 
22     ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Components"], "Badges")),
23   BS5Container(["mt-3"]).row(
24     H5Div(["col-12", "col-lg-2"], 
25       listLevels("basic"),
26       listAreas("basic", "components"),
27       listSections("basic", "components", "badges")),
28     H5Div(["col-12", "col-lg-8"], 
29       dateInfo(this),
30       H5H2(["display-4"], "Badges"),
31       H5Hr,
32 
33 demoBs5Example("headings", "Headings with badges", 
34   H5Div(
35     H5H1(H5String("H1 with "), BS5Badge(["bg-secondary"], "Badge")),
36     H5H2(H5String("H2 with "), BS5Badge(["bg-secondary"], "Badge")),
37     H5H3(H5String("H3 with "), BS5Badge(["bg-secondary"], "Badge")),
38     H5H4(H5String("H4 with "), BS5Badge(["bg-secondary"], "Badge")),
39     H5H5(H5String("H5 with "), BS5Badge(["bg-secondary"], "Badge")),
40     H5H6(H5String("H6 with "), BS5Badge(["bg-secondary"], "Badge"))), 
41   `H5H1(H5String("H1 with "), BS5Badge(["bg-secondary"], "Badge")),
42     H5H2(H5String("H2 with "), BS5Badge(["bg-secondary"], "Badge")),
43     H5H3(H5String("H3 with "), BS5Badge(["bg-secondary"], "Badge")),
44     H5H4(H5String("H4 with "), BS5Badge(["bg-secondary"], "Badge")),
45     H5H5(H5String("H5 with "), BS5Badge(["bg-secondary"], "Badge")),
46     H5H6(H5String("H6 with "), BS5Badge(["bg-secondary"], "Badge"))`, 
47 `H5H1(H5String("H1 mit "), BS5Badge(["bg-secondary"], "Badge"))
48 H5H2(H5String("H2 mit "), BS5Badge(["bg-secondary"], "Badge"))
49 H5H3(H5String("H3 mit "), BS5Badge(["bg-secondary"], "Badge"))
50 H5H4([H5String("H4 mit "), BS5Badge(["bg-secondary"], "Badge"))
51 H5H5(H5String("H5 mit "), BS5Badge(["bg-secondary"], "Badge"))
52 H5H6(H5String("H6 mit "), BS5Badge(["bg-secondary"], "Badge"))`),
53 
54 demoBs5Example("buttons", "Buttons with Badges", 
55   H5Div(
56     BS5Button(["btn-secondary"], H5String("Notifications "), BS5Badge(["bg-light", "text-dark"], "10"))
57     ), 
58 `BS5Button(["btn-secondary"], H5String("Notifications "), BS5Badge(["bg-light", "text-dark"], "10"))`, 
59 `BS5Button(["btn-secondary"], H5String("Notifications "), BS5Badge(["bg-light", "text-dark"], "10"))`
60 ),
61 
62 demoBs5Example("accessible", "Buttons with accessible badges", 
63   H5Div(
64     BS5Button(["btn-secondary"], 
65       H5String("Profile "),
66       BS5Badge(["bg-light", "text-dark"], "3"),
67       H5Span(["visually-hidden"], "unread messages"))
68   ), 
69   `BS5Button(["btn-secondary"], 
70       H5String("Profile "),
71       BS5Badge(["bg-light", "text-dark"], "3"),
72       H5Span(["visually-hidden"], "unread messages"))`, ``),
73 
74 demoBs5Example("bgcolors", "With background colors", 
75   H5Div(
76     BS5Badge(["bg-primary"], "Primary"), 
77     BS5Badge(["bg-secondary"], "Secondary"), 
78     BS5Badge(["bg-success"], "Success"), 
79     BS5Badge(["bg-danger"], "Danger"), 
80     BS5Badge(["bg-warning text-dark"], "Warning"), 
81     BS5Badge(["bg-info"], "Info"), 
82     BS5Badge(["bg-light", "text-dark"], "Light"), 
83     BS5Badge(["bg-dark"], "Dark")
84     ), 
85     `BS5Badge(["bg-primary"], "Primary"), 
86     BS5Badge(["bg-secondary"], "Secondary"), 
87     BS5Badge(["bg-success"], "Success"), 
88     BS5Badge(["bg-danger"], "Danger"), 
89     BS5Badge(["bg-warning text-dark"], "Warning"), 
90     BS5Badge(["bg-info"], "Info"), 
91     BS5Badge(["bg-light", "text-dark"], "Light"), 
92     BS5Badge(["bg-dark"], "Dark")`, ``), 
93 
94 demoBs5Example("pills", "Pill style", 
95   H5Div(
96     BS5Badge(["rounded-pill", "bg-primary"], "Primary"),
97     BS5Badge(["rounded-pill", "bg-secondary"], "Secondary"),
98     BS5Badge(["rounded-pill", "bg-success"], "Success"),
99     BS5Badge(["rounded-pill", "bg-danger"], "Danger"),
100     BS5Badge(["rounded-pill", "bg-warning", "text-dark"], "Warning"),
101     BS5Badge(["rounded-pill", "bg-info"], "Info"),
102     BS5Badge(["rounded-pill", "bg-light", "text-dark"], "Light"),
103     BS5Badge(["rounded-pill", "bg-dark"], "Dark")
104     ), 
105     `BS5Badge(["rounded-pill", "bg-primary"], "Primary"),
106     BS5Badge(["rounded-pill", "bg-secondary"], "Secondary"),
107     BS5Badge(["rounded-pill", "bg-success"], "Success"),
108     BS5Badge(["rounded-pill", "bg-danger"], "Danger"),
109     BS5Badge(["rounded-pill", "bg-warning", "text-dark"], "Warning"),
110     BS5Badge(["rounded-pill", "bg-info"], "Info"),
111     BS5Badge(["rounded-pill", "bg-light", "text-dark"], "Light"),
112     BS5Badge(["rounded-pill", "bg-dark"], "Dark")`, ``)
113     
114     ),
115     H5Div(["col-12", "col-lg-2"]))).toString;
116     }
117   });
118 }