diff --git a/docs/api/accordion.md b/docs/api/accordion.md index 7e4d33f324..c36341d35f 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -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'; + + + :::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. - +import SkipAccordionToggle from '@site/static/usage/v8/accordion/skip-accordion-toggle/index.md'; + + ## Multiple Accordions diff --git a/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_css.md b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_css.md new file mode 100644 index 0000000000..28fb72462b --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_css.md @@ -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; +} +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_html.md b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_html.md new file mode 100644 index 0000000000..d21c1db292 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_html.md @@ -0,0 +1,71 @@ +```html + + + + + + + Folder One + +
+ + + + + Subfolder 1 + +
+ + + + Document 1 + +
+ + + + + + Document 1 + + + + + Document 2 + + + + + Document 3 + +
+ + + + + + Folder Two + +
+ + Folder is empty + +
+ + + + + + Folder Three + +
+ + + + Document 1 + +
+ + + +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_ts.md b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_ts.md new file mode 100644 index 0000000000..850b47657d --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/angular/example_component_ts.md @@ -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 {} +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/demo.html b/static/usage/v8/accordion/skip-accordion-toggle/demo.html new file mode 100644 index 0000000000..364e7a9778 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/demo.html @@ -0,0 +1,114 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + + + + Folder One + +
+ + + + + Subfolder 1 + +
+ + + + Document 1 + +
+ + + + + + Document 1 + + + + + Document 2 + + + + + Document 3 + +
+ + + + + + Folder Two + +
+ + Folder is empty + +
+ + + + + + Folder Three + +
+ + + + Document 1 + +
+ + + +
+ + + + diff --git a/static/usage/v8/accordion/skip-accordion-toggle/index.md b/static/usage/v8/accordion/skip-accordion-toggle/index.md new file mode 100644 index 0000000000..f92101d5c1 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/index.md @@ -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'; + + diff --git a/static/usage/v8/accordion/skip-accordion-toggle/javascript.md b/static/usage/v8/accordion/skip-accordion-toggle/javascript.md new file mode 100644 index 0000000000..e04813d331 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/javascript.md @@ -0,0 +1,91 @@ +```html + + + + + + + Folder One + +
+ + + + + Subfolder 1 + +
+ + + + Document 1 + +
+ + + + + + Document 1 + + + + + Document 2 + + + + + Document 3 + +
+ + + + + + Folder Two + +
+ + Folder is empty + +
+ + + + + + Folder Three + +
+ + + + Document 1 + +
+ + + + + +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/react/main_css.md b/static/usage/v8/accordion/skip-accordion-toggle/react/main_css.md new file mode 100644 index 0000000000..28fb72462b --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/react/main_css.md @@ -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; +} +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/react/main_tsx.md b/static/usage/v8/accordion/skip-accordion-toggle/react/main_tsx.md new file mode 100644 index 0000000000..ad5582c6a5 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/react/main_tsx.md @@ -0,0 +1,80 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonRadioGroup, IonRadio, IonItem, IonIcon, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + + + + + Folder One + +
+ + + + + Subfolder 1 + +
+ + + + Document 1 + +
+ + + + + + Document 1 + + + + + Document 2 + + + + + Document 3 + +
+ + + + + + Folder Two + +
+ + Folder is empty + +
+ + + + + + Folder Three + +
+ + + + Document 1 + +
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/skip-accordion-toggle/vue.md b/static/usage/v8/accordion/skip-accordion-toggle/vue.md new file mode 100644 index 0000000000..d641104e63 --- /dev/null +++ b/static/usage/v8/accordion/skip-accordion-toggle/vue.md @@ -0,0 +1,111 @@ +```html + + + + + +```