Skip to content

Commit ea7d61f

Browse files
liamdebeasiliamdebeasi
authored
docs(): add new Ionic 6 examples that match usage (#2087)
1 parent 517b5a1 commit ea7d61f

File tree

4 files changed

+797
-57
lines changed

4 files changed

+797
-57
lines changed

‎static/demos/api/accordion/index.html

+353
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width initial-scale=1.0">
6+
<title>Accordion</title>
7+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
8+
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
10+
<style>
11+
:root {
12+
--ion-safe-area-top: 20px;
13+
--ion-safe-area-bottom: 22px;
14+
}
15+
16+
ion-list-header {
17+
padding-bottom: 12px;
18+
}
19+
20+
ion-content {
21+
--background: #f2f2f7;
22+
}
23+
</style>
24+
<script type="module">
25+
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
26+
window.toastController = toastController;
27+
</script>
28+
</head>
29+
<body>
30+
<ion-app>
31+
<ion-header translucent="true">
32+
<ion-toolbar>
33+
<ion-buttons slot="start">
34+
<ion-back-button defaultHref="/"></ion-back-button>
35+
</ion-buttons>
36+
<ion-title>Accordion</ion-title>
37+
</ion-toolbar>
38+
</ion-header>
39+
40+
<ion-content fullscreen class="component-content">
41+
<component-details description="description" url="url"></component-details>
42+
43+
<ion-list inset="true">
44+
<ion-list-header>Basic</ion-list-header>
45+
<ion-accordion-group>
46+
<ion-accordion value="colors">
47+
<ion-item slot="header" color="primary">
48+
<ion-label>Colors</ion-label>
49+
</ion-item>
50+
51+
<ion-list slot="content">
52+
<ion-item>
53+
<ion-label>Red</ion-label>
54+
</ion-item>
55+
<ion-item>
56+
<ion-label>Green</ion-label>
57+
</ion-item>
58+
<ion-item>
59+
<ion-label>Blue</ion-label>
60+
</ion-item>
61+
</ion-list>
62+
</ion-accordion>
63+
<ion-accordion value="shapes">
64+
<ion-item slot="header" color="success">
65+
<ion-label>Shapes</ion-label>
66+
</ion-item>
67+
68+
<ion-list slot="content">
69+
<ion-item>
70+
<ion-label>Circle</ion-label>
71+
</ion-item>
72+
<ion-item>
73+
<ion-label>Triangle</ion-label>
74+
</ion-item>
75+
<ion-item>
76+
<ion-label>Square</ion-label>
77+
</ion-item>
78+
</ion-list>
79+
</ion-accordion>
80+
<ion-accordion value="numbers">
81+
<ion-item slot="header" color="danger">
82+
<ion-label>Numbers</ion-label>
83+
</ion-item>
84+
85+
<ion-list slot="content">
86+
<ion-item>
87+
<ion-label>1</ion-label>
88+
</ion-item>
89+
<ion-item>
90+
<ion-label>2</ion-label>
91+
</ion-item>
92+
<ion-item>
93+
<ion-label>3</ion-label>
94+
</ion-item>
95+
</ion-list>
96+
</ion-accordion>
97+
</ion-accordion-group>
98+
</ion-list>
99+
100+
<ion-list inset="true">
101+
<ion-list-header>Custom Icon</ion-list-header>
102+
<ion-accordion-group>
103+
<ion-accordion value="colors" toggle-icon="arrow-down-circle">
104+
<ion-item slot="header" color="primary">
105+
<ion-label>Colors</ion-label>
106+
</ion-item>
107+
108+
<ion-list slot="content">
109+
<ion-item>
110+
<ion-label>Red</ion-label>
111+
</ion-item>
112+
<ion-item>
113+
<ion-label>Green</ion-label>
114+
</ion-item>
115+
<ion-item>
116+
<ion-label>Blue</ion-label>
117+
</ion-item>
118+
</ion-list>
119+
</ion-accordion>
120+
<ion-accordion value="shapes" toggle-icon="arrow-down-circle">
121+
<ion-item slot="header" color="success">
122+
<ion-label>Shapes</ion-label>
123+
</ion-item>
124+
125+
<ion-list slot="content">
126+
<ion-item>
127+
<ion-label>Circle</ion-label>
128+
</ion-item>
129+
<ion-item>
130+
<ion-label>Triangle</ion-label>
131+
</ion-item>
132+
<ion-item>
133+
<ion-label>Square</ion-label>
134+
</ion-item>
135+
</ion-list>
136+
</ion-accordion>
137+
<ion-accordion value="numbers" toggle-icon="arrow-down-circle">
138+
<ion-item slot="header" color="danger">
139+
<ion-label>Numbers</ion-label>
140+
</ion-item>
141+
142+
<ion-list slot="content">
143+
<ion-item>
144+
<ion-label>1</ion-label>
145+
</ion-item>
146+
<ion-item>
147+
<ion-label>2</ion-label>
148+
</ion-item>
149+
<ion-item>
150+
<ion-label>3</ion-label>
151+
</ion-item>
152+
</ion-list>
153+
</ion-accordion>
154+
</ion-accordion-group>
155+
</ion-list>
156+
157+
<ion-list inset="true">
158+
<ion-list-header>Open Accordion</ion-list-header>
159+
<ion-accordion-group value="colors">
160+
<ion-accordion value="colors">
161+
<ion-item slot="header" color="primary">
162+
<ion-label>Colors</ion-label>
163+
</ion-item>
164+
165+
<ion-list slot="content">
166+
<ion-item>
167+
<ion-label>Red</ion-label>
168+
</ion-item>
169+
<ion-item>
170+
<ion-label>Green</ion-label>
171+
</ion-item>
172+
<ion-item>
173+
<ion-label>Blue</ion-label>
174+
</ion-item>
175+
</ion-list>
176+
</ion-accordion>
177+
<ion-accordion value="shapes">
178+
<ion-item slot="header" color="success">
179+
<ion-label>Shapes</ion-label>
180+
</ion-item>
181+
182+
<ion-list slot="content">
183+
<ion-item>
184+
<ion-label>Circle</ion-label>
185+
</ion-item>
186+
<ion-item>
187+
<ion-label>Triangle</ion-label>
188+
</ion-item>
189+
<ion-item>
190+
<ion-label>Square</ion-label>
191+
</ion-item>
192+
</ion-list>
193+
</ion-accordion>
194+
<ion-accordion value="numbers">
195+
<ion-item slot="header" color="danger">
196+
<ion-label>Numbers</ion-label>
197+
</ion-item>
198+
199+
<ion-list slot="content">
200+
<ion-item>
201+
<ion-label>1</ion-label>
202+
</ion-item>
203+
<ion-item>
204+
<ion-label>2</ion-label>
205+
</ion-item>
206+
<ion-item>
207+
<ion-label>3</ion-label>
208+
</ion-item>
209+
</ion-list>
210+
</ion-accordion>
211+
</ion-accordion-group>
212+
</ion-list>
213+
214+
<ion-list inset="true">
215+
<ion-list-header>Multiple Accordions</ion-list-header>
216+
<ion-accordion-group multiple="true" id="multiple">
217+
<ion-accordion value="colors">
218+
<ion-item slot="header" color="primary">
219+
<ion-label>Colors</ion-label>
220+
</ion-item>
221+
222+
<ion-list slot="content">
223+
<ion-item>
224+
<ion-label>Red</ion-label>
225+
</ion-item>
226+
<ion-item>
227+
<ion-label>Green</ion-label>
228+
</ion-item>
229+
<ion-item>
230+
<ion-label>Blue</ion-label>
231+
</ion-item>
232+
</ion-list>
233+
</ion-accordion>
234+
<ion-accordion value="shapes">
235+
<ion-item slot="header" color="success">
236+
<ion-label>Shapes</ion-label>
237+
</ion-item>
238+
239+
<ion-list slot="content">
240+
<ion-item>
241+
<ion-label>Circle</ion-label>
242+
</ion-item>
243+
<ion-item>
244+
<ion-label>Triangle</ion-label>
245+
</ion-item>
246+
<ion-item>
247+
<ion-label>Square</ion-label>
248+
</ion-item>
249+
</ion-list>
250+
</ion-accordion>
251+
<ion-accordion value="numbers">
252+
<ion-item slot="header" color="danger">
253+
<ion-label>Numbers</ion-label>
254+
</ion-item>
255+
256+
<ion-list slot="content">
257+
<ion-item>
258+
<ion-label>1</ion-label>
259+
</ion-item>
260+
<ion-item>
261+
<ion-label>2</ion-label>
262+
</ion-item>
263+
<ion-item>
264+
<ion-label>3</ion-label>
265+
</ion-item>
266+
</ion-list>
267+
</ion-accordion>
268+
</ion-accordion-group>
269+
</ion-list>
270+
271+
<ion-list inset="true">
272+
<ion-list-header>Managing State</ion-list-header>
273+
<ion-accordion-group id="state" value="numbers">
274+
<ion-accordion value="colors">
275+
<ion-item slot="header" color="primary">
276+
<ion-label>Colors</ion-label>
277+
</ion-item>
278+
279+
<ion-list slot="content">
280+
<ion-item>
281+
<ion-label>Red</ion-label>
282+
</ion-item>
283+
<ion-item>
284+
<ion-label>Green</ion-label>
285+
</ion-item>
286+
<ion-item>
287+
<ion-label>Blue</ion-label>
288+
</ion-item>
289+
</ion-list>
290+
</ion-accordion>
291+
<ion-accordion value="shapes">
292+
<ion-item slot="header" color="success">
293+
<ion-label>Shapes</ion-label>
294+
</ion-item>
295+
296+
<ion-list slot="content">
297+
<ion-item>
298+
<ion-label>Circle</ion-label>
299+
</ion-item>
300+
<ion-item>
301+
<ion-label>Triangle</ion-label>
302+
</ion-item>
303+
<ion-item>
304+
<ion-label>Square</ion-label>
305+
</ion-item>
306+
</ion-list>
307+
</ion-accordion>
308+
<ion-accordion value="numbers">
309+
<ion-item slot="header" color="danger">
310+
<ion-label>Numbers</ion-label>
311+
</ion-item>
312+
313+
<ion-list slot="content">
314+
<ion-item>
315+
<ion-label>1</ion-label>
316+
</ion-item>
317+
<ion-item>
318+
<ion-label>2</ion-label>
319+
</ion-item>
320+
<ion-item>
321+
<ion-label>3</ion-label>
322+
</ion-item>
323+
</ion-list>
324+
</ion-accordion>
325+
</ion-accordion-group>
326+
</ion-list>
327+
328+
<div class="ion-padding-start ion-padding-end ion-padding-bottom">
329+
<ion-button expand="block" onclick="logAccordionGroup()">Log Value of Accordion Group</ion-button>
330+
<ion-button expand="block" onclick="closeAccordions()">Close Accordion</ion-button>
331+
</div>
332+
</ion-content>
333+
</ion-app>
334+
335+
<script>
336+
const stateAccordion = document.querySelector('#state');
337+
function logAccordionGroup() {
338+
const toast = toastController.create({
339+
message: 'Accordion Value: ' + stateAccordion.value,
340+
duration: 5000
341+
});
342+
343+
toast.then((toastEl) => {
344+
toastEl.present();
345+
})
346+
}
347+
348+
function closeAccordions() {
349+
stateAccordion.value = undefined;
350+
}
351+
</script>
352+
</body>
353+
</html>

0 commit comments

Comments
 (0)