Skip to content

Commit d4a9bc7

Browse files
committed
docs(accordion): update angular to standalone
1 parent c5926f0 commit d4a9bc7

File tree

66 files changed

+854
-44
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+854
-44
lines changed
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```html
2+
<ion-accordion-group [animated]="false">
3+
<ion-accordion value="first">
4+
<ion-item slot="header" color="light">
5+
<ion-label>First Accordion</ion-label>
6+
</ion-item>
7+
<div class="ion-padding" slot="content">First Content</div>
8+
</ion-accordion>
9+
<ion-accordion value="second">
10+
<ion-item slot="header" color="light">
11+
<ion-label>Second Accordion</ion-label>
12+
</ion-item>
13+
<div class="ion-padding" slot="content">Second Content</div>
14+
</ion-accordion>
15+
<ion-accordion value="third">
16+
<ion-item slot="header" color="light">
17+
<ion-label>Third Accordion</ion-label>
18+
</ion-item>
19+
<div class="ion-padding" slot="content">Third Content</div>
20+
</ion-accordion>
21+
</ion-accordion-group>
22+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/accordion/accessibility/animations/index.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
src="usage/v7/accordion/accessibility/animations/demo.html"
1724
/>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```html
2+
<ion-accordion-group>
3+
<ion-accordion value="first">
4+
<ion-item slot="header" color="light">
5+
<ion-label>First Accordion</ion-label>
6+
</ion-item>
7+
<div class="ion-padding" slot="content">First Content</div>
8+
</ion-accordion>
9+
<ion-accordion value="second">
10+
<ion-item slot="header" color="light">
11+
<ion-label>Second Accordion</ion-label>
12+
</ion-item>
13+
<div class="ion-padding" slot="content">Second Content</div>
14+
</ion-accordion>
15+
<ion-accordion value="third">
16+
<ion-item slot="header" color="light">
17+
<ion-label>Third Accordion</ion-label>
18+
</ion-item>
19+
<div class="ion-padding" slot="content">Third Content</div>
20+
</ion-accordion>
21+
</ion-accordion-group>
22+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/accordion/basic/index.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
src="usage/v7/accordion/basic/demo.html"
1724
size="210px"
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
34

45
@Component({
56
selector: 'app-example',
67
templateUrl: 'example.component.html',
78
styleUrls: ['example.component.css'],
9+
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
810
})
911
export class ExampleComponent {}
1012
```
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```html
2+
<ion-accordion-group expand="inset">
3+
<ion-accordion value="first">
4+
<ion-item slot="header" color="light">
5+
<ion-label>First Accordion</ion-label>
6+
</ion-item>
7+
<div class="ion-padding" slot="content">First Content</div>
8+
</ion-accordion>
9+
<ion-accordion value="second">
10+
<ion-item slot="header" color="light">
11+
<ion-label>Second Accordion</ion-label>
12+
</ion-item>
13+
<div class="ion-padding" slot="content">Second Content</div>
14+
</ion-accordion>
15+
<ion-accordion value="third">
16+
<ion-item slot="header" color="light">
17+
<ion-label>Third Accordion</ion-label>
18+
</ion-item>
19+
<div class="ion-padding" slot="content">Third Content</div>
20+
</ion-accordion>
21+
</ion-accordion-group>
22+
```
Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel],
9+
})
10+
export class ExampleComponent {}
11+
```

static/usage/v7/accordion/customization/expansion-styles/index.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,22 @@ import Playground from '@site/src/components/global/Playground';
33
import javascript from './javascript.md';
44
import react from './react.md';
55
import vue from './vue.md';
6-
import angular from './angular.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
79

810
<Playground
911
version="7"
1012
code={{
1113
javascript,
1214
react,
1315
vue,
14-
angular,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
1522
}}
1623
size="250px"
1724
src="usage/v7/accordion/customization/expansion-styles/demo.html"

0 commit comments

Comments
 (0)