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

1 module uim.bootstrap.bs5.demos.components.buttongroups;
2 
3 import uim.bootstrap;
4 
5 static this() {
6 	demoBS5.pages("basic/components/buttongroups", 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": "Buttongroups - 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"], "Button Groups")),
23   BS5Container(["mt-3"]).row(
24     H5Div(["col-12", "col-lg-2"], 
25       listLevels("basic"),
26       listAreas("basic", "components"),
27       listSections("basic", "components", "buttongroups")),
28     H5Div(["col-12", "col-lg-8"], 
29       dateInfo(this),
30       H5H2(["display-4"], "Button Groups"),
31       H5Hr,
32 
33 demoBs5Example("default", "Default",  
34   H5Div(
35     BS5ButtonGroup(["aria-label":"Default button group"], 
36       BS5Button(["btn-secondary"], "Home"), 
37       BS5Button(["btn-secondary"], "Profile"),
38       BS5Button(["btn-secondary"], "Settings"))
39       ), 
40       `BS5ButtonGroup(["aria-label":"Default button group"], 
41       BS5Button(["btn-secondary"], "Home"), 
42       BS5Button(["btn-secondary"], "Profile"),
43       BS5Button(["btn-secondary"], "Settings"))`, ``),
44 
45 demoBs5Example("states", "States",  
46   H5Div(
47     BS5ButtonGroup(["aria-label":"Default button group"], 
48       BS5Button(["btn-secondary", "active"], "Home"), 
49       BS5Button(["btn-secondary"], "Profile"),
50       BS5Button(["btn-secondary"], "Settings"))
51       ), 
52       `BS5ButtonGroup(["aria-label":"Default button group"], 
53       BS5Button(["btn-secondary", "active"], "Home"), 
54       BS5Button(["btn-secondary"], "Profile"),
55       BS5Button(["btn-secondary"], "Settings"))`, ``),
56 
57 demoBs5Example("outlined", "Outlined",  
58   H5Div(
59     BS5ButtonGroup(["aria-label":"Default button group"], 
60       BS5Button(["btn-outline-secondary"], "Home"), 
61       BS5Button(["btn-outline-secondary"], "Profile"),
62       BS5Button(["btn-outline-secondary"], "Settings"))
63       ), 
64       `BS5ButtonGroup(["aria-label":"Default button group"], 
65       BS5Button(["btn-outline-secondary"], "Home"), 
66       BS5Button(["btn-outline-secondary"], "Profile"),
67       BS5Button(["btn-outline-secondary"], "Settings"))`, ``),
68 
69 
70 demoBs5Example("links", "Links",  
71   H5Div(
72     BS5ButtonGroup(["aria-label":"Default button group"], 
73       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Home"), 
74       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Profile"),
75       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Settings"))), 
76       `BS5ButtonGroup(["aria-label":"Default button group"], 
77       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Home"), 
78       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Profile"),
79       BS5ButtonLink(["btn-secondary"], ["href":"#"], "Settings"))`, ``),
80 
81 demoBs5Example("toolbar", "Toolbar",  
82   H5Div(
83     BS5ButtonToolbar(["aria-label":"Toolbar button group"], 
84       BS5ButtonGroup(["aria-label":"First group"], 
85         BS5Button(["btn-secondary"], "1"), 
86         BS5Button(["btn-secondary"], "2"),
87         BS5Button(["btn-secondary"], "3")),
88       BS5ButtonGroup(["aria-label":"Second group"], 
89         BS5Button(["btn-secondary"], "4"), 
90         BS5Button(["btn-secondary"], "5"),
91         BS5Button(["btn-secondary"], "6")),
92       BS5ButtonGroup(["aria-label":"Third group"], 
93         BS5Button(["btn-secondary"], "7"), 
94         BS5Button(["btn-secondary"], "8"),
95         BS5Button(["btn-secondary"], "9")))), 
96         `BS5ButtonToolbar(["aria-label":"Toolbar button group"], 
97       BS5ButtonGroup(["aria-label":"First group"], 
98         BS5Button(["btn-secondary"], "1"), 
99         BS5Button(["btn-secondary"], "2"),
100         BS5Button(["btn-secondary"], "3")),
101       BS5ButtonGroup(["aria-label":"Second group"], 
102         BS5Button(["btn-secondary"], "4"), 
103         BS5Button(["btn-secondary"], "5"),
104         BS5Button(["btn-secondary"], "6")),
105       BS5ButtonGroup(["aria-label":"Third group"], 
106         BS5Button(["btn-secondary"], "7"), 
107         BS5Button(["btn-secondary"], "8"),
108         BS5Button(["btn-secondary"], "9")))`, ``),
109 
110 demoBs5Example("sizing", "Sizing",  
111   H5Div(
112     BS5ButtonGroup(["btn-group-sm"], ["aria-label":"Small button group"], 
113       BS5Button(["btn-secondary"], "Home"), 
114       BS5Button(["btn-secondary"], "Profile"),
115       BS5Button(["btn-secondary"], "Settings")),
116     BS5ButtonGroup(["aria-label":"Default button group"], 
117       BS5Button(["btn-secondary"], "Home"), 
118       BS5Button(["btn-secondary"], "Profile"),
119       BS5Button(["btn-secondary"], "Settings")),
120     BS5ButtonGroup(["btn-group-lg"], ["aria-label":"Large button group"], 
121       BS5Button(["btn-secondary"], "Home"), 
122       BS5Button(["btn-secondary"], "Profile"),
123       BS5Button(["btn-secondary"], "Settings"))
124       ), 
125       `BS5ButtonGroup(["btn-group-sm"], ["aria-label":"Small button group"], 
126       BS5Button(["btn-secondary"], "Home"), 
127       BS5Button(["btn-secondary"], "Profile"),
128       BS5Button(["btn-secondary"], "Settings")),
129     BS5ButtonGroup(["aria-label":"Default button group"], 
130       BS5Button(["btn-secondary"], "Home"), 
131       BS5Button(["btn-secondary"], "Profile"),
132       BS5Button(["btn-secondary"], "Settings")),
133     BS5ButtonGroup(["btn-group-lg"], ["aria-label":"Large button group"], 
134       BS5Button(["btn-secondary"], "Home"), 
135       BS5Button(["btn-secondary"], "Profile"),
136       BS5Button(["btn-secondary"], "Settings"))`, ``),
137 
138 demoBs5Example("nesting", "Nesting",  
139   H5Div(
140     BS5ButtonGroup(["aria-label":"Button group with nested dropdown"], 
141       BS5Button(["btn-secondary"], "Home"), 
142       BS5Button(["btn-secondary"], "Profile"),
143       BS5ButtonGroup( 
144         BS5Button("btnGroupNesting", ["btn-secondary", "dropdown-toggle"], ["data-bs-toggle":"dropdown", "aria-expanded":"false"], "Settings"),
145         H5Div(["dropdown-menu"], ["aria-labelledby":"btnGroupNesting"], 
146           H5A(["dropdown-item"], ["href":"#"], "Dropdown link"),
147           H5A(["dropdown-item"], ["href":"#"], "Dropdown link"))))
148   ), 
149   `BS5ButtonGroup(["aria-label":"Button group with nested dropdown"], 
150       BS5Button(["btn-secondary"], "Home"), 
151       BS5Button(["btn-secondary"], "Profile"),
152       BS5ButtonGroup( 
153         BS5Button("btnGroupNesting", ["btn-secondary", "dropdown-toggle"], ["data-bs-toggle":"dropdown", "aria-expanded":"false"], "Settings"),
154         H5Div(["dropdown-menu"], ["aria-labelledby":"btnGroupNesting"], 
155           H5A(["dropdown-item"], ["href":"#"], "Dropdown link"),
156           H5A(["dropdown-item"], ["href":"#"], "Dropdown link"))))`, ``),
157 
158 demoBs5Example("vertical", "Vertical",  
159   H5Div(
160     H5Div(["btn-group-vertical"], ["role":"group", "aria-label":"Vertical button group"],
161       BS5Button(["btn-secondary"], "Home"), 
162       BS5Button(["btn-secondary"], "Profile"),
163       BS5Button(["btn-secondary"], "Settings"))
164       ), 
165       `H5Div(["btn-group-vertical"], ["role":"group", "aria-label":"Vertical button group"],
166       BS5Button(["btn-secondary"], "Home"), 
167       BS5Button(["btn-secondary"], "Profile"),
168       BS5Button(["btn-secondary"], "Settings"))`, ``)
169     )
170   )
171 ).toString;
172 
173     }
174   });
175 }