From 1c9435c3f5b032b7dcc8fbf386beddb564412a41 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 8 Jul 2021 16:47:21 -0400 Subject: [PATCH] docs(accordion): add usage on how to get and set the state programmatically (#23595) --- core/src/components/accordion/readme.md | 839 +++++++++++++----- .../src/components/accordion/usage/angular.md | 81 ++ .../components/accordion/usage/javascript.md | 73 +- core/src/components/accordion/usage/react.md | 520 ++++++----- .../src/components/accordion/usage/stencil.md | 82 +- core/src/components/accordion/usage/vue.md | 82 +- core/src/components/datetime/readme.md | 29 +- core/src/components/datetime/usage/angular.md | 29 +- 8 files changed, 1248 insertions(+), 487 deletions(-) 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() {