Skip to content

Commit

Permalink
docs(): add new Ionic 6 examples that match usage (#2087)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liamdebeasi
liamdebeasi authored Nov 9, 2021
1 parent 517b5a1 commit ea7d61f
Show file tree
Hide file tree
Showing 4 changed files with 797 additions and 57 deletions.
353 changes: 353 additions & 0 deletions static/demos/api/accordion/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,353 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Accordion</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}

ion-list-header {
padding-bottom: 12px;
}

ion-content {
--background: #f2f2f7;
}
</style>
<script type="module">
import { toastController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/index.esm.js';
window.toastController = toastController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/"></ion-back-button>
</ion-buttons>
<ion-title>Accordion</ion-title>
</ion-toolbar>
</ion-header>

<ion-content fullscreen class="component-content">
<component-details description="description" url="url"></component-details>

<ion-list inset="true">
<ion-list-header>Basic</ion-list-header>
<ion-accordion-group>
<ion-accordion value="colors">
<ion-item slot="header" color="primary">
<ion-label>Colors</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="shapes">
<ion-item slot="header" color="success">
<ion-label>Shapes</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Circle</ion-label>
</ion-item>
<ion-item>
<ion-label>Triangle</ion-label>
</ion-item>
<ion-item>
<ion-label>Square</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header" color="danger">
<ion-label>Numbers</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>1</ion-label>
</ion-item>
<ion-item>
<ion-label>2</ion-label>
</ion-item>
<ion-item>
<ion-label>3</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-list>

<ion-list inset="true">
<ion-list-header>Custom Icon</ion-list-header>
<ion-accordion-group>
<ion-accordion value="colors" toggle-icon="arrow-down-circle">
<ion-item slot="header" color="primary">
<ion-label>Colors</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="shapes" toggle-icon="arrow-down-circle">
<ion-item slot="header" color="success">
<ion-label>Shapes</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Circle</ion-label>
</ion-item>
<ion-item>
<ion-label>Triangle</ion-label>
</ion-item>
<ion-item>
<ion-label>Square</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers" toggle-icon="arrow-down-circle">
<ion-item slot="header" color="danger">
<ion-label>Numbers</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>1</ion-label>
</ion-item>
<ion-item>
<ion-label>2</ion-label>
</ion-item>
<ion-item>
<ion-label>3</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-list>

<ion-list inset="true">
<ion-list-header>Open Accordion</ion-list-header>
<ion-accordion-group value="colors">
<ion-accordion value="colors">
<ion-item slot="header" color="primary">
<ion-label>Colors</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="shapes">
<ion-item slot="header" color="success">
<ion-label>Shapes</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Circle</ion-label>
</ion-item>
<ion-item>
<ion-label>Triangle</ion-label>
</ion-item>
<ion-item>
<ion-label>Square</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header" color="danger">
<ion-label>Numbers</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>1</ion-label>
</ion-item>
<ion-item>
<ion-label>2</ion-label>
</ion-item>
<ion-item>
<ion-label>3</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-list>

<ion-list inset="true">
<ion-list-header>Multiple Accordions</ion-list-header>
<ion-accordion-group multiple="true" id="multiple">
<ion-accordion value="colors">
<ion-item slot="header" color="primary">
<ion-label>Colors</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="shapes">
<ion-item slot="header" color="success">
<ion-label>Shapes</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Circle</ion-label>
</ion-item>
<ion-item>
<ion-label>Triangle</ion-label>
</ion-item>
<ion-item>
<ion-label>Square</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header" color="danger">
<ion-label>Numbers</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>1</ion-label>
</ion-item>
<ion-item>
<ion-label>2</ion-label>
</ion-item>
<ion-item>
<ion-label>3</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-list>

<ion-list inset="true">
<ion-list-header>Managing State</ion-list-header>
<ion-accordion-group id="state" value="numbers">
<ion-accordion value="colors">
<ion-item slot="header" color="primary">
<ion-label>Colors</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Red</ion-label>
</ion-item>
<ion-item>
<ion-label>Green</ion-label>
</ion-item>
<ion-item>
<ion-label>Blue</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="shapes">
<ion-item slot="header" color="success">
<ion-label>Shapes</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>Circle</ion-label>
</ion-item>
<ion-item>
<ion-label>Triangle</ion-label>
</ion-item>
<ion-item>
<ion-label>Square</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
<ion-accordion value="numbers">
<ion-item slot="header" color="danger">
<ion-label>Numbers</ion-label>
</ion-item>

<ion-list slot="content">
<ion-item>
<ion-label>1</ion-label>
</ion-item>
<ion-item>
<ion-label>2</ion-label>
</ion-item>
<ion-item>
<ion-label>3</ion-label>
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-list>

<div class="ion-padding-start ion-padding-end ion-padding-bottom">
<ion-button expand="block" onclick="logAccordionGroup()">Log Value of Accordion Group</ion-button>
<ion-button expand="block" onclick="closeAccordions()">Close Accordion</ion-button>
</div>
</ion-content>
</ion-app>

<script>
const stateAccordion = document.querySelector('#state');
function logAccordionGroup() {
const toast = toastController.create({
message: 'Accordion Value: ' + stateAccordion.value,
duration: 5000
});

toast.then((toastEl) => {
toastEl.present();
})
}

function closeAccordions() {
stateAccordion.value = undefined;
}
</script>
</body>
</html>
Loading

1 comment on commit ea7d61f

@vercel
Copy link

@vercel vercel bot commented on ea7d61f Nov 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.