Skip to content

Commit 39db7a6

Browse files
brandyscarneybrandyscarney
committed
docs(item-group): update angular to standalone
1 parent c5926f0 commit 39db7a6

File tree

12 files changed

+316
-8
lines changed

12 files changed

+316
-8
lines changed

‎static/usage/v7/item-group/basic/angular/example_component_html.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```html
2+
<ion-item-group>
3+
<ion-item-divider>
4+
<ion-label>A</ion-label>
5+
</ion-item-divider>
6+
7+
<ion-item>
8+
<ion-label>Angola</ion-label>
9+
</ion-item>
10+
<ion-item>
11+
<ion-label>Argentina</ion-label>
12+
</ion-item>
13+
<ion-item lines="none">
14+
<ion-label>Armenia</ion-label>
15+
</ion-item>
16+
</ion-item-group>
17+
18+
<ion-item-group>
19+
<ion-item-divider>
20+
<ion-label>B</ion-label>
21+
</ion-item-divider>
22+
23+
<ion-item>
24+
<ion-label>Bangladesh</ion-label>
25+
</ion-item>
26+
<ion-item>
27+
<ion-label>Belarus</ion-label>
28+
</ion-item>
29+
<ion-item lines="none">
30+
<ion-label>Belgium</ion-label>
31+
</ion-item>
32+
</ion-item-group>
33+
```

‎static/usage/v7/item-group/basic/angular/example_component_ts.md‎

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 { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel],
9+
})
10+
export class ExampleComponent {}
11+
```

‎static/usage/v7/item-group/basic/index.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ 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"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
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+
},
22+
}}
1123
src="usage/v7/item-group/basic/demo.html"
1224
size="medium"
1325
/>

‎static/usage/v7/item-group/sliding-items/angular/example_component_html.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
```html
2+
<ion-item-group>
3+
<ion-item-divider>
4+
<ion-label> Fruits </ion-label>
5+
</ion-item-divider>
6+
7+
<ion-item-sliding>
8+
<ion-item>
9+
<ion-label> Grapes </ion-label>
10+
</ion-item>
11+
<ion-item-options>
12+
<ion-item-option> Favorite </ion-item-option>
13+
</ion-item-options>
14+
</ion-item-sliding>
15+
16+
<ion-item-sliding>
17+
<ion-item>
18+
<ion-label> Apples </ion-label>
19+
</ion-item>
20+
<ion-item-options>
21+
<ion-item-option> Favorite </ion-item-option>
22+
</ion-item-options>
23+
</ion-item-sliding>
24+
25+
<ion-item-sliding>
26+
<ion-item lines="none">
27+
<ion-label> Bananas </ion-label>
28+
</ion-item>
29+
<ion-item-options>
30+
<ion-item-option> Favorite </ion-item-option>
31+
</ion-item-options>
32+
</ion-item-sliding>
33+
</ion-item-group>
34+
35+
<ion-item-group>
36+
<ion-item-divider>
37+
<ion-label> Vegetables </ion-label>
38+
</ion-item-divider>
39+
40+
<ion-item-sliding>
41+
<ion-item>
42+
<ion-label> Carrots </ion-label>
43+
</ion-item>
44+
<ion-item-options>
45+
<ion-item-option> Favorite </ion-item-option>
46+
</ion-item-options>
47+
</ion-item-sliding>
48+
49+
<ion-item-sliding>
50+
<ion-item>
51+
<ion-label> Broccoli </ion-label>
52+
</ion-item>
53+
<ion-item-options>
54+
<ion-item-option> Favorite </ion-item-option>
55+
</ion-item-options>
56+
</ion-item-sliding>
57+
58+
<ion-item-sliding>
59+
<ion-item lines="none">
60+
<ion-label> Celery </ion-label>
61+
</ion-item>
62+
<ion-item-options>
63+
<ion-item-option> Favorite </ion-item-option>
64+
</ion-item-options>
65+
</ion-item-sliding>
66+
</ion-item-group>
67+
```

‎static/usage/v7/item-group/sliding-items/angular/example_component_ts.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import {
4+
IonItem,
5+
IonItemDivider,
6+
IonItemGroup,
7+
IonItemOption,
8+
IonItemOptions,
9+
IonItemSliding,
10+
IonLabel,
11+
} from '@ionic/angular/standalone';
12+
13+
@Component({
14+
selector: 'app-example',
15+
templateUrl: 'example.component.html',
16+
imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel],
17+
})
18+
export class ExampleComponent {}
19+
```

‎static/usage/v7/item-group/sliding-items/index.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ 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"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
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+
},
22+
}}
1123
src="usage/v7/item-group/sliding-items/demo.html"
1224
size="medium"
1325
/>

‎static/usage/v8/item-group/basic/angular/example_component_html.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```html
2+
<ion-item-group>
3+
<ion-item-divider>
4+
<ion-label>A</ion-label>
5+
</ion-item-divider>
6+
7+
<ion-item>
8+
<ion-label>Angola</ion-label>
9+
</ion-item>
10+
<ion-item>
11+
<ion-label>Argentina</ion-label>
12+
</ion-item>
13+
<ion-item lines="none">
14+
<ion-label>Armenia</ion-label>
15+
</ion-item>
16+
</ion-item-group>
17+
18+
<ion-item-group>
19+
<ion-item-divider>
20+
<ion-label>B</ion-label>
21+
</ion-item-divider>
22+
23+
<ion-item>
24+
<ion-label>Bangladesh</ion-label>
25+
</ion-item>
26+
<ion-item>
27+
<ion-label>Belarus</ion-label>
28+
</ion-item>
29+
<ion-item lines="none">
30+
<ion-label>Belgium</ion-label>
31+
</ion-item>
32+
</ion-item-group>
33+
```

‎static/usage/v8/item-group/basic/angular/example_component_ts.md‎

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 { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel],
9+
})
10+
export class ExampleComponent {}
11+
```

‎static/usage/v8/item-group/basic/index.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ 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="8"
10-
code={{ javascript, react, vue, angular }}
12+
code={{
13+
javascript,
14+
react,
15+
vue,
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+
},
22+
}}
1123
src="usage/v8/item-group/basic/demo.html"
1224
size="medium"
1325
/>

‎static/usage/v8/item-group/sliding-items/angular/example_component_html.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
```html
2+
<ion-item-group>
3+
<ion-item-divider>
4+
<ion-label> Fruits </ion-label>
5+
</ion-item-divider>
6+
7+
<ion-item-sliding>
8+
<ion-item>
9+
<ion-label> Grapes </ion-label>
10+
</ion-item>
11+
<ion-item-options>
12+
<ion-item-option> Favorite </ion-item-option>
13+
</ion-item-options>
14+
</ion-item-sliding>
15+
16+
<ion-item-sliding>
17+
<ion-item>
18+
<ion-label> Apples </ion-label>
19+
</ion-item>
20+
<ion-item-options>
21+
<ion-item-option> Favorite </ion-item-option>
22+
</ion-item-options>
23+
</ion-item-sliding>
24+
25+
<ion-item-sliding>
26+
<ion-item lines="none">
27+
<ion-label> Bananas </ion-label>
28+
</ion-item>
29+
<ion-item-options>
30+
<ion-item-option> Favorite </ion-item-option>
31+
</ion-item-options>
32+
</ion-item-sliding>
33+
</ion-item-group>
34+
35+
<ion-item-group>
36+
<ion-item-divider>
37+
<ion-label> Vegetables </ion-label>
38+
</ion-item-divider>
39+
40+
<ion-item-sliding>
41+
<ion-item>
42+
<ion-label> Carrots </ion-label>
43+
</ion-item>
44+
<ion-item-options>
45+
<ion-item-option> Favorite </ion-item-option>
46+
</ion-item-options>
47+
</ion-item-sliding>
48+
49+
<ion-item-sliding>
50+
<ion-item>
51+
<ion-label> Broccoli </ion-label>
52+
</ion-item>
53+
<ion-item-options>
54+
<ion-item-option> Favorite </ion-item-option>
55+
</ion-item-options>
56+
</ion-item-sliding>
57+
58+
<ion-item-sliding>
59+
<ion-item lines="none">
60+
<ion-label> Celery </ion-label>
61+
</ion-item>
62+
<ion-item-options>
63+
<ion-item-option> Favorite </ion-item-option>
64+
</ion-item-options>
65+
</ion-item-sliding>
66+
</ion-item-group>
67+
```

0 commit comments

Comments
 (0)