javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(accordion): add usage on how to get and set the state programmatically (#23595)

Browse Source
This commit is contained in:
Liam DeBeasi
2021-07-08 16:47:21 -04:00
committed by GitHub
parent 259b1359db
commit 1c9435c3f5
8 changed files with 1248 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

839
core/src/components/accordion/readme.md
View File

@@ -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
</ion-accordion-group>
```
**component.html**
```html
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button (click)="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button (click)="closeAccordion()">Close All Accordions</ion-button>
```
**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
</ion-accordion-group>
<!-- Multiple Accordions -->
<ion-accordion-group multiple="true">
<ion-accordion-group multiple="true" id="multiple">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
@@ -531,9 +611,76 @@ When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard sup
</ion-accordion>
</ion-accordion-group>
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers" id="state">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button onclick="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button onclick="closeAccordion()">Close All Accordions</ion-button>
<script>
let accordionGroup = document.querySelector('ion-accordion-group');
accordionGroup.value = ['colors', 'numbers'];
const accordionGroup = document.querySelector('ion-accordion-group#state');
let accordionGroupMultiple = document.querySelector('ion-accordion-group#multiple');
accordionGroupMultiple.value = ['colors', 'numbers'];
const logAccordionValue = () => {
console.log(accordionGroup.value);
}
const closeAccordion = () => {
accordionGroup.value = undefined;
}
</script>
```
@@ -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 --*/}
<IonAccordionGroup>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Custom Icon --*/}
<IonAccordionGroup>
<IonAccordion value="colors" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Open Accordion --*/}
<IonAccordionGroup value="colors">
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Multiple Accordions --*/}
<IonAccordionGroup multiple={true} value={['colors', 'numbers']}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
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 (
<IonPage>
<IonContent>
{/*-- Basic --*/}
<IonAccordionGroup>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Custom Icon --*/}
<IonAccordionGroup>
<IonAccordion value="colors" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Open Accordion --*/}
<IonAccordionGroup value="colors">
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Multiple Accordions --*/}
<IonAccordionGroup multiple={true} value={['colors', 'numbers']}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Getting and setting the state of the accordion group --*/}
<IonAccordionGroup value="numbers" ref={accordionGroupRef}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
<IonButton onClick={() => logAccordionValue()}>Log Value of Accordion Group</IonButton>
<IonButton onClick={() => closeAccordion()}>Close All Accordions</IonButton>
</IonContent>
</IonPage>
)
);
```
@@ -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 {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Custom Icon
<ion-accordion-group>
@@ -890,7 +1129,7 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Open Accordion
<ion-accordion-group value="colors">
@@ -945,7 +1184,7 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Multiple Accordions
<ion-accordion-group multiple={true} value={['colors', 'numbers']}>
@@ -1000,7 +1239,65 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
{/* Getting and setting the state of the accordion group */}
<ion-accordion-group value="numbers" ref={el => this.accordionGroupRef = el}>
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button onClick={() => logAccordionValue()}>Log Value of Accordion Group</ion-button>,
<ion-button onClick={() => closeAccordion()}>Close All Accordions</ion-button>,
];
}
);
@@ -1230,17 +1527,91 @@ export const AccordionExample {
</ion-list>
</ion-accordion>
</ion-accordion-group>
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers" ref="accordionGroup">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button @click="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button @click="closeAccordion()">Close All Accordions</ion-button>
</template>
<script>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';
import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { arrowDownCircle } from 'ionicons/icons';
export default defineComponent({
components: { IonAccordion, IonAccordionGroup, IonItem, IonLabel },
components: { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel },
setup() {
return { arrowDownCircle }
const accordionGroup = ref();
const logAccordionValue = () => {
if (accordionGroup.value) {
console.log(accordionGroup.value.$el.value);
}
}
const closeAccordion = () => {
if (accordionGroup.value) {
accordionGroup.value.$el.value = undefined;
}
}
return {
accordionGroup,
arrowDownCircle,
closeAccordion,
logAccordionValue
}
}
});
</script>

81
core/src/components/accordion/usage/angular.md
View File

@@ -219,3 +219,84 @@
</ion-accordion>
</ion-accordion-group>
```
**component.html**
```html
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button (click)="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button (click)="closeAccordion()">Close All Accordions</ion-button>
```
**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;
}
}
```

73
core/src/components/accordion/usage/javascript.md
View File

@@ -165,7 +165,7 @@
</ion-accordion-group>
<!-- Multiple Accordions -->
<ion-accordion-group multiple="true">
<ion-accordion-group multiple="true" id="multiple">
<ion-accordion value="colors">
<ion-item slot="header">
<ion-label>Colors</ion-label>
@@ -219,8 +219,75 @@
</ion-accordion>
</ion-accordion-group>
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers" id="state">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button onclick="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button onclick="closeAccordion()">Close All Accordions</ion-button>
<script>
let accordionGroup = document.querySelector('ion-accordion-group');
accordionGroup.value = ['colors', 'numbers'];
const accordionGroup = document.querySelector('ion-accordion-group#state');
let accordionGroupMultiple = document.querySelector('ion-accordion-group#multiple');
accordionGroupMultiple.value = ['colors', 'numbers'];
const logAccordionValue = () => {
console.log(accordionGroup.value);
}
const closeAccordion = () => {
accordionGroup.value = undefined;
}
</script>
```

520
core/src/components/accordion/usage/react.md
View File

@@ -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 --*/}
<IonAccordionGroup>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Custom Icon --*/}
<IonAccordionGroup>
<IonAccordion value="colors" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Open Accordion --*/}
<IonAccordionGroup value="colors">
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Multiple Accordions --*/}
<IonAccordionGroup multiple={true} value={['colors', 'numbers']}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
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 (
<IonPage>
<IonContent>
{/*-- Basic --*/}
<IonAccordionGroup>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Custom Icon --*/}
<IonAccordionGroup>
<IonAccordion value="colors" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers" toggleIcon={arrowDownCircle}>
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Open Accordion --*/}
<IonAccordionGroup value="colors">
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Multiple Accordions --*/}
<IonAccordionGroup multiple={true} value={['colors', 'numbers']}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
{/*-- Getting and setting the state of the accordion group --*/}
<IonAccordionGroup value="numbers" ref={accordionGroupRef}>
<IonAccordion value="colors">
<IonItem slot="header">
<IonLabel>Colors</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Red</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Green</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Blue</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="shapes">
<IonItem slot="header">
<IonLabel>Shapes</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>Circle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Triangle</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Square</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
<IonAccordion value="numbers">
<IonItem slot="header">
<IonLabel>Numbers</IonLabel>
</IonItem>
<ion-list slot="content">
<IonItem>
<IonLabel>1</IonLabel>
</IonItem>
<IonItem>
<IonLabel>2</IonLabel>
</IonItem>
<IonItem>
<IonLabel>3</IonLabel>
</IonItem>
</ion-list>
</IonAccordion>
</IonAccordionGroup>
<IonButton onClick={() => logAccordionValue()}>Log Value of Accordion Group</IonButton>
<IonButton onClick={() => closeAccordion()}>Close All Accordions</IonButton>
</IonContent>
</IonPage>
)
);
```

82
core/src/components/accordion/usage/stencil.md
View File

@@ -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 {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Custom Icon
<ion-accordion-group>
@@ -116,7 +132,7 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Open Accordion
<ion-accordion-group value="colors">
@@ -171,7 +187,7 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
// Multiple Accordions
<ion-accordion-group multiple={true} value={['colors', 'numbers']}>
@@ -226,7 +242,65 @@ export const AccordionExample {
</ion-item>
</ion-list>
</ion-accordion>
</ion-accordion-group>
</ion-accordion-group>,
{/* Getting and setting the state of the accordion group */}
<ion-accordion-group value="numbers" ref={el => this.accordionGroupRef = el}>
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button onClick={() => logAccordionValue()}>Log Value of Accordion Group</ion-button>,
<ion-button onClick={() => closeAccordion()}>Close All Accordions</ion-button>,
];
}
);

82
core/src/components/accordion/usage/vue.md
View File

@@ -219,17 +219,91 @@
</ion-list>
</ion-accordion>
</ion-accordion-group>
<!-- Getting and setting the state of the accordion group -->
<ion-accordion-group value="numbers" ref="accordionGroup">
<ion-accordion value="colors">
<ion-item slot="header">
<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">
<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">
<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-button @click="logAccordionValue()">Log Value of Accordion Group</ion-button>
<ion-button @click="closeAccordion()">Close All Accordions</ion-button>
</template>
<script>
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';
import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { arrowDownCircle } from 'ionicons/icons';
export default defineComponent({
components: { IonAccordion, IonAccordionGroup, IonItem, IonLabel },
components: { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel },
setup() {
return { arrowDownCircle }
const accordionGroup = ref();
const logAccordionValue = () => {
if (accordionGroup.value) {
console.log(accordionGroup.value.$el.value);
}
}
const closeAccordion = () => {
if (accordionGroup.value) {
accordionGroup.value.$el.value = undefined;
}
}
return {
accordionGroup,
arrowDownCircle,
closeAccordion,
logAccordionValue
}
}
});
</script>

29
core/src/components/datetime/readme.md
View File

@@ -176,14 +176,6 @@ dates in JavaScript.
<div slot="title">My Custom Title</div>
</ion-datetime>
<!-- Custom buttons -->
<ion-datetime #customDatetime>
<ion-buttons slot="buttons">
<ion-button (click)="confirm()">Good to go!</ion-button>
<ion-button (click)="reset()">Reset</ion-button>
</ion-buttons>
</ion-datetime>
<!-- Datetime in overlay -->
<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
@@ -193,11 +185,28 @@ dates in JavaScript.
</ion-content>
</ng-template>
</ion-modal>
```
**component.html**
```html
<!-- Custom buttons -->
<ion-datetime>
<ion-buttons slot="buttons">
<ion-button (click)="confirm()">Good to go!</ion-button>
<ion-button (click)="reset()">Reset</ion-button>
</ion-buttons>
</ion-datetime>
```
**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() {

29
core/src/components/datetime/usage/angular.md
View File

@@ -31,14 +31,6 @@
<div slot="title">My Custom Title</div>
</ion-datetime>
<!-- Custom buttons -->
<ion-datetime #customDatetime>
<ion-buttons slot="buttons">
<ion-button (click)="confirm()">Good to go!</ion-button>
<ion-button (click)="reset()">Reset</ion-button>
</ion-buttons>
</ion-datetime>
<!-- Datetime in overlay -->
<ion-button id="open-modal">Open Datetime Modal</ion-button>
<ion-modal trigger="open-modal">
@@ -48,11 +40,28 @@
</ion-content>
</ng-template>
</ion-modal>
```
**component.html**
```html
<!-- Custom buttons -->
<ion-datetime>
<ion-buttons slot="buttons">
<ion-button (click)="confirm()">Good to go!</ion-button>
<ion-button (click)="reset()">Reset</ion-button>
</ion-buttons>
</ion-datetime>
```
**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() {