diff --git a/core/src/components/accordion/readme.md b/core/src/components/accordion/readme.md
index 511171b89e..1a58d1fcdd 100644
--- a/core/src/components/accordion/readme.md
+++ b/core/src/components/accordion/readme.md
@@ -57,7 +57,6 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
This example will set the text color of the header `ion-item` to red when the accordion is expanded.
-
## Accessibility
### Animations
@@ -307,6 +306,87 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
```
+**component.html**
+```html
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+Log Value of Accordion Group
+Close All Accordions
+```
+
+**component.ts**
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({…})
+export class MyComponent {
+ @ViewChild(IonAccordionGroup, { static: true }) accordionGroup: IonAccordionGroup;
+ constructor() {}
+
+ logAccordionValue() {
+ console.log(this.accordionGroup.value);
+ }
+
+ closeAccordion() {
+ this.accordionGroup.value = undefined;
+ }
+}
+```
+
### Javascript
@@ -477,7 +557,7 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
-
+
Colors
@@ -531,9 +611,76 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+Log Value of Accordion Group
+Close All Accordions
+
```
@@ -541,231 +688,307 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
### React
```tsx
-import React from 'react';
+import React, { useRef } from 'react';
-import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel } from '@ionic/react';
+import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonPage } from '@ionic/react';
import { arrowDownCircle } from 'ionicons/icons';
-export const AccordionExample: React.FC = () => (
- {/*-- Basic --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Custom Icon --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Open Accordion --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Multiple Accordions --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
+export const AccordionExample: React.FC = () => {
+ const accordionGroupRef = useRef(null);
+ const logAccordionValue = () => {
+ if (accordionGroupRef.current) {
+ console.log(accordionGroupRef.current.value);
+ }
+ }
+ const closeAccordion = () => {
+ if (accordionGroupRef.current) {
+ accordionGroupRef.current.value = undefined;
+ }
+ }
+
+ return (
+
+
+ {/*-- Basic --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Custom Icon --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Open Accordion --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Multiple Accordions --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Getting and setting the state of the accordion group --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ logAccordionValue()}>Log Value of Accordion Group
+ closeAccordion()}>Close All Accordions
+
+
+ )
);
```
@@ -780,6 +1003,22 @@ import { Component, h } from '@stencil/core';
styleUrl: 'accordion-example.css'
})
export const AccordionExample {
+ private accordionGroupRef?: HTMLIonAccordionGroupEl;
+
+ private logAccordionValue = () => {
+ const { accordionGroupRef } = this;
+ if (accordionGroupRef) {
+ console.log(accordionGroupRef.value);
+ }
+ }
+
+ private closeAccordion = () => {
+ const { accordionGroupRef } = this;
+ if (accordionGroupRef) {
+ accordionGroupRef.value = undefined;
+ }
+ }
+
render() {
return [
// Basic
@@ -835,7 +1074,7 @@ export const AccordionExample {
-
+ ,
// Custom Icon
@@ -890,7 +1129,7 @@ export const AccordionExample {
-
+ ,
// Open Accordion
@@ -945,7 +1184,7 @@ export const AccordionExample {
-
+ ,
// Multiple Accordions
@@ -1000,7 +1239,65 @@ export const AccordionExample {
-
+ ,
+
+ {/* Getting and setting the state of the accordion group */}
+ this.accordionGroupRef = el}>
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+ ,
+
+ logAccordionValue()}>Log Value of Accordion Group,
+ closeAccordion()}>Close All Accordions,
];
}
);
@@ -1230,17 +1527,91 @@ export const AccordionExample {
+
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ Log Value of Accordion Group
+ Close All Accordions
diff --git a/core/src/components/accordion/usage/angular.md b/core/src/components/accordion/usage/angular.md
index 398805a23d..4e3b36f648 100644
--- a/core/src/components/accordion/usage/angular.md
+++ b/core/src/components/accordion/usage/angular.md
@@ -219,3 +219,84 @@
```
+
+**component.html**
+```html
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+Log Value of Accordion Group
+Close All Accordions
+```
+
+**component.ts**
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { IonAccordionGroup } from '@ionic/angular';
+
+@Component({…})
+export class MyComponent {
+ @ViewChild(IonAccordionGroup, { static: true }) accordionGroup: IonAccordionGroup;
+ constructor() {}
+
+ logAccordionValue() {
+ console.log(this.accordionGroup.value);
+ }
+
+ closeAccordion() {
+ this.accordionGroup.value = undefined;
+ }
+}
+```
\ No newline at end of file
diff --git a/core/src/components/accordion/usage/javascript.md b/core/src/components/accordion/usage/javascript.md
index ce873dd5bd..6e8fd6db5b 100644
--- a/core/src/components/accordion/usage/javascript.md
+++ b/core/src/components/accordion/usage/javascript.md
@@ -165,7 +165,7 @@
-
+
Colors
@@ -219,8 +219,75 @@
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+Log Value of Accordion Group
+Close All Accordions
+
```
diff --git a/core/src/components/accordion/usage/react.md b/core/src/components/accordion/usage/react.md
index f046f15073..52df2e1f08 100644
--- a/core/src/components/accordion/usage/react.md
+++ b/core/src/components/accordion/usage/react.md
@@ -1,228 +1,304 @@
```tsx
-import React from 'react';
+import React, { useRef } from 'react';
-import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel } from '@ionic/react';
+import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonPage } from '@ionic/react';
import { arrowDownCircle } from 'ionicons/icons';
-export const AccordionExample: React.FC = () => (
- {/*-- Basic --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Custom Icon --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Open Accordion --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
-
- {/*-- Multiple Accordions --*/}
-
-
-
- Colors
-
-
-
-
- Red
-
-
- Green
-
-
- Blue
-
-
-
-
-
- Shapes
-
-
-
-
- Circle
-
-
- Triangle
-
-
- Square
-
-
-
-
-
- Numbers
-
-
-
-
- 1
-
-
- 2
-
-
- 3
-
-
-
-
+export const AccordionExample: React.FC = () => {
+ const accordionGroupRef = useRef(null);
+ const logAccordionValue = () => {
+ if (accordionGroupRef.current) {
+ console.log(accordionGroupRef.current.value);
+ }
+ }
+ const closeAccordion = () => {
+ if (accordionGroupRef.current) {
+ accordionGroupRef.current.value = undefined;
+ }
+ }
+
+ return (
+
+
+ {/*-- Basic --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Custom Icon --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Open Accordion --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Multiple Accordions --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ {/*-- Getting and setting the state of the accordion group --*/}
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ logAccordionValue()}>Log Value of Accordion Group
+ closeAccordion()}>Close All Accordions
+
+
+ )
);
```
diff --git a/core/src/components/accordion/usage/stencil.md b/core/src/components/accordion/usage/stencil.md
index 216c584638..749275000c 100644
--- a/core/src/components/accordion/usage/stencil.md
+++ b/core/src/components/accordion/usage/stencil.md
@@ -6,6 +6,22 @@ import { Component, h } from '@stencil/core';
styleUrl: 'accordion-example.css'
})
export const AccordionExample {
+ private accordionGroupRef?: HTMLIonAccordionGroupEl;
+
+ private logAccordionValue = () => {
+ const { accordionGroupRef } = this;
+ if (accordionGroupRef) {
+ console.log(accordionGroupRef.value);
+ }
+ }
+
+ private closeAccordion = () => {
+ const { accordionGroupRef } = this;
+ if (accordionGroupRef) {
+ accordionGroupRef.value = undefined;
+ }
+ }
+
render() {
return [
// Basic
@@ -61,7 +77,7 @@ export const AccordionExample {
-
+ ,
// Custom Icon
@@ -116,7 +132,7 @@ export const AccordionExample {
-
+ ,
// Open Accordion
@@ -171,7 +187,7 @@ export const AccordionExample {
-
+ ,
// Multiple Accordions
@@ -226,7 +242,65 @@ export const AccordionExample {
-
+ ,
+
+ {/* Getting and setting the state of the accordion group */}
+ this.accordionGroupRef = el}>
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+ ,
+
+ logAccordionValue()}>Log Value of Accordion Group,
+ closeAccordion()}>Close All Accordions,
];
}
);
diff --git a/core/src/components/accordion/usage/vue.md b/core/src/components/accordion/usage/vue.md
index 52b5f05426..52055a561d 100644
--- a/core/src/components/accordion/usage/vue.md
+++ b/core/src/components/accordion/usage/vue.md
@@ -219,17 +219,91 @@
+
+
+
+
+
+ Colors
+
+
+
+
+ Red
+
+
+ Green
+
+
+ Blue
+
+
+
+
+
+ Shapes
+
+
+
+
+ Circle
+
+
+ Triangle
+
+
+ Square
+
+
+
+
+
+ Numbers
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+ Log Value of Accordion Group
+ Close All Accordions
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 659c774f8d..bcc5f94d0d 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -176,14 +176,6 @@ dates in JavaScript.
My Custom Title
-
-
-
- Good to go!
- Reset
-
-
-
Open Datetime Modal
@@ -193,11 +185,28 @@ dates in JavaScript.
+```
+
+**component.html**
+```html
+
+
+
+ Good to go!
+ Reset
+
+
+```
+
+**component.ts**
+```typescript
+
+import { Component, ViewChild } from '@angular/core';
+import { IonDatetime } from '@ionic/angular';
-```javascript
@Component({…})
export class MyComponent {
- @ViewChild('customDatetime', { static: false }) datetime: HTMLIonDateTimeElement;
+ @ViewChild(IonDatetime, { static: true }) datetime: IonDatetime;
constructor() {}
confirm() {
diff --git a/core/src/components/datetime/usage/angular.md b/core/src/components/datetime/usage/angular.md
index cf8067e176..3f6a0a644d 100644
--- a/core/src/components/datetime/usage/angular.md
+++ b/core/src/components/datetime/usage/angular.md
@@ -31,14 +31,6 @@
My Custom Title
-
-
-
- Good to go!
- Reset
-
-
-
Open Datetime Modal
@@ -48,11 +40,28 @@
+```
+
+**component.html**
+```html
+
+
+
+ Good to go!
+ Reset
+
+
+```
+
+**component.ts**
+```typescript
+
+import { Component, ViewChild } from '@angular/core';
+import { IonDatetime } from '@ionic/angular';
-```javascript
@Component({…})
export class MyComponent {
- @ViewChild('customDatetime', { static: false }) datetime: HTMLIonDateTimeElement;
+ @ViewChild(IonDatetime, { static: true }) datetime: IonDatetime;
constructor() {}
confirm() {