Skip to content

docs(): add new Ionic 6 examples that match usage #2087

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 9, 2021
Merged

docs(): add new Ionic 6 examples that match usage #2087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
136b028
Add accordion demo
liamdebeasi Oct 20, 2021
5064602
add breadcrumbs demo
liamdebeasi Oct 20, 2021
b214874
add modal examples
liamdebeasi Oct 20, 2021
60464c5
clean up datetime examples
liamdebeasi Oct 21, 2021
82d9def
datetime fix
liamdebeasi Oct 21, 2021
8e1072d
remove duplicate breadcrumb example
liamdebeasi Oct 22, 2021
0444550
remove cover example:
liamdebeasi Nov 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
353 changes: 353 additions & 0 deletions static/demos/api/accordion/index.html
View file
Open in desktop
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