Skip to content
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

feat(accordion): add docs for skip-accordion-toggle #4050

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(accordion): add docs for skip-accordion-toggle #4050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2e2f8fb
chore(accordion): update accordion doc
eduardoRoth Mar 21, 2025
2449f4d
feat(accordion): add docs for skip-accordion-toggle
eduardoRoth Mar 21, 2025
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
14 changes: 11 additions & 3 deletions docs/api/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,25 @@ import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';

## Listen for Accordion State Changes

Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.

import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';

<ListenChanges />

:::caution
Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion.

When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants.
:::

Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
### skip-accordion-toggle

import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
There are cases where you might require to have interactive components inside the accordion header which shouldn't trigger the `ionChange` event for the Accordion Group (e.g. creating a selectable tree view using radio buttons or checkboxes). In those cases you can add the `skip-accordion-toggle` attribute to the component inside the Accordion header and it won't toggle the Accordion.

<ListenChanges />
import SkipAccordionToggle from '@site/static/usage/v8/accordion/skip-accordion-toggle/index.md';

<SkipAccordionToggle />

## Multiple Accordions

Expand Down
19 changes: 19 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```css
ion-radio {
--border-radius: 50%;
--color: #ddd;
--color-checked: #6815ec;
}

ion-radio.ios::part(container) {
width: 20px;
height: 20px;

border: 2px solid #ddd;
border-radius: 50%;
}

.radio-checked.ios::part(container) {
border-color: #6815ec;
}
```
71 changes: 71 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
```html
<ion-accordion-group multiple="true">
<ion-radio-group>
<ion-accordion value="first">
<ion-item slot="header">
<ion-radio value="folder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder One</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-accordion value="first-first">
<ion-item slot="header">
<ion-radio value="folder-1-subfolder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Subfolder 1</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio value="folder-1-subfolder-1-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>

<ion-item>
<ion-radio value="folder-1-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 2</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 3</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header">
<ion-radio value="folder-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Two</ion-label>
</ion-item>
<div class="ion-padding-start" slot="content">
<ion-item lines="none">
<ion-label>Folder is empty</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="third">
<ion-item slot="header">
<ion-radio value="folder-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Three</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio value="folder-3-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>
</ion-radio-group>
</ion-accordion-group>
```
12 changes: 12 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component, ViewChild } from '@angular/core';
import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel],
})
export class ExampleComponent {}
```
114 changes: 114 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
<style>
ion-radio {
--border-radius: 50%;

--color: #ddd;
--color-checked: #6815ec;
}

ion-radio.ios::part(container) {
width: 20px;
height: 20px;

border: 2px solid #ddd;
border-radius: 50%;
}

.radio-checked.ios::part(container) {
border-color: #6815ec;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-accordion-group multiple="true">
<ion-radio-group>
<ion-accordion value="first">
<ion-item slot="header">
<ion-radio value="folder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder One</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-accordion value="first-first">
<ion-item slot="header">
<ion-radio value="folder-1-subfolder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Subfolder 1</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio
value="folder-1-subfolder-1-document-1"
slot="start"
skip-accordion-toggle
></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>

<ion-item>
<ion-radio value="folder-1-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 2</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 3</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header">
<ion-radio value="folder-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Two</ion-label>
</ion-item>
<div class="ion-padding-start" slot="content">
<ion-item lines="none">
<ion-label>Folder is empty</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="third">
<ion-item slot="header">
<ion-radio value="folder-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Three</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio value="folder-3-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>
</ion-radio-group>
</ion-accordion-group>
</div>
</ion-content>
</ion-app>
</body>
</html>
35 changes: 35 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_css from './angular/example_component_css.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="8"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
size="large"
src="usage/v8/accordion/skip-accordion-toggle/demo.html"
/>
91 changes: 91 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
```html
<ion-accordion-group multiple="true">
<ion-radio-group>
<ion-accordion value="first">
<ion-item slot="header">
<ion-radio value="folder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder One</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-accordion value="first-first">
<ion-item slot="header">
<ion-radio value="folder-1-subfolder-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Subfolder 1</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio value="folder-1-subfolder-1-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>

<ion-item>
<ion-radio value="folder-1-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 2</ion-label>
</ion-item>
<ion-item>
<ion-radio value="folder-1-document-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 3</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header">
<ion-radio value="folder-2" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Two</ion-label>
</ion-item>
<div class="ion-padding-start" slot="content">
<ion-item lines="none">
<ion-label>Folder is empty</ion-label>
</ion-item>
</div>
</ion-accordion>
<ion-accordion value="third">
<ion-item slot="header">
<ion-radio value="folder-3" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon slot="start" name="folder"></ion-icon>
<ion-label>Folder Three</ion-label>
</ion-item>
<div slot="content" class="ion-padding-start">
<ion-item>
<ion-radio value="folder-3-document-1" slot="start" skip-accordion-toggle></ion-radio>
<ion-icon name="document" slot="start"></ion-icon>
<ion-label>Document 1</ion-label>
</ion-item>
</div>
</ion-accordion>
</ion-radio-group>
</ion-accordion-group>

<style>
ion-radio {
--border-radius: 50%;
--color: #ddd;
--color-checked: #6815ec;
}

ion-radio.ios::part(container) {
width: 20px;
height: 20px;

border: 2px solid #ddd;
border-radius: 50%;
}

.radio-checked.ios::part(container) {
border-color: #6815ec;
}
</style>
```
19 changes: 19 additions & 0 deletions static/usage/v8/accordion/skip-accordion-toggle/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
```css
ion-radio {
--border-radius: 50%;
--color: #ddd;
--color-checked: #6815ec;
}

ion-radio.ios::part(container) {
width: 20px;
height: 20px;

border: 2px solid #ddd;
border-radius: 50%;
}

.radio-checked.ios::part(container) {
border-color: #6815ec;
}
```
Loading