Skip to content

Commit 7cccc48

Browse files
brandyscarneybrandyscarney
committed
docs(item): update angular to standalone
1 parent c5926f0 commit 7cccc48

File tree

52 files changed

+950
-28
lines changed

Some content is hidden

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

52 files changed

+950
-28
lines changed

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Basic Item</ion-label>
4+
</ion-item>
5+
6+
<ion-item>
7+
<ion-label>
8+
Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
9+
adipiscing elit.
10+
</ion-label>
11+
</ion-item>
12+
13+
<ion-item>
14+
<ion-label class="ion-text-nowrap">
15+
Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
16+
adipiscing elit.
17+
</ion-label>
18+
</ion-item>
19+
20+
<ion-item>
21+
<ion-label>
22+
<h1>H1 Heading</h1>
23+
<p>Paragraph</p>
24+
</ion-label>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-label>
29+
<h2>H2 Heading</h2>
30+
<p>Paragraph</p>
31+
</ion-label>
32+
</ion-item>
33+
34+
<ion-item>
35+
<ion-label>
36+
<h3>H3 Heading</h3>
37+
<p>Paragraph</p>
38+
</ion-label>
39+
</ion-item>
40+
```

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

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +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';
76

8-
<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/basic/demo.html" size="medium" />
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
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+
}}
23+
src="usage/v7/item/basic/demo.html"
24+
size="medium"
25+
/>

‎static/usage/v7/item/buttons/angular/example_component_ts.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular/standalone';
34

45
import { addIcons } from 'ionicons';
56
import { home, navigate, star } from 'ionicons/icons';
@@ -8,6 +9,7 @@ import { home, navigate, star } from 'ionicons/icons';
89
selector: 'app-example',
910
templateUrl: 'example.component.html',
1011
styleUrls: ['example.component.css'],
12+
imports: [IonButton, IonIcon, IonItem, IonLabel],
1113
})
1214
export class ExampleComponent {
1315
constructor() {

‎static/usage/v7/item/clickable/angular/example_component_html.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-item href="#">
3+
<ion-label>Anchor Item</ion-label>
4+
</ion-item>
5+
6+
<ion-item href="#" disabled="true">
7+
<ion-label>Disabled Anchor Item</ion-label>
8+
</ion-item>
9+
10+
<ion-item button>
11+
<ion-label>Button Item</ion-label>
12+
</ion-item>
13+
14+
<ion-item button disabled="true">
15+
<ion-label>Disabled Button Item</ion-label>
16+
</ion-item>
17+
```

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

‎static/usage/v7/item/clickable/index.md‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +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';
76

8-
<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/item/clickable/demo.html" />
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
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+
}}
23+
src="usage/v7/item/clickable/demo.html"
24+
/>

‎static/usage/v7/item/content-types/actions/angular/example_component_ts.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
```ts
22
import { Component } from '@angular/core';
3+
import {
4+
IonAvatar,
5+
IonContent,
6+
IonHeader,
7+
IonIcon,
8+
IonItem,
9+
IonItemOption,
10+
IonItemOptions,
11+
IonItemSliding,
12+
IonLabel,
13+
IonList,
14+
IonTitle,
15+
IonToolbar,
16+
} from '@ionic/angular/standalone';
317

418
import { addIcons } from 'ionicons';
519
import { pin, share, trash } from 'ionicons/icons';
@@ -8,6 +22,20 @@ import { pin, share, trash } from 'ionicons/icons';
822
selector: 'app-example',
923
templateUrl: 'example.component.html',
1024
styleUrls: ['example.component.css'],
25+
imports: [
26+
IonAvatar,
27+
IonContent,
28+
IonHeader,
29+
IonIcon,
30+
IonItem,
31+
IonItemOption,
32+
IonItemOptions,
33+
IonItemSliding,
34+
IonLabel,
35+
IonList,
36+
IonTitle,
37+
IonToolbar,
38+
],
1139
})
1240
export class ExampleComponent {
1341
constructor() {

‎static/usage/v7/item/content-types/controls/angular/example_component_html.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```html
2+
<ion-header>
3+
<ion-toolbar>
4+
<ion-title>Example</ion-title>
5+
</ion-toolbar>
6+
</ion-header>
7+
<ion-content color="light">
8+
<ion-list [inset]="true">
9+
<ion-item>
10+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
11+
<ion-input aria-label="Task name" value="Get eggs"></ion-input>
12+
</ion-item>
13+
<ion-item>
14+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
15+
<ion-input aria-label="Task name" value="Get milk"></ion-input>
16+
</ion-item>
17+
<ion-item>
18+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
19+
<ion-input aria-label="Task name" value="Take out compost"></ion-input>
20+
</ion-item>
21+
<ion-item>
22+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
23+
<ion-input aria-label="Task name" value="Pick up dry cleaning"></ion-input>
24+
</ion-item>
25+
<ion-item>
26+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
27+
<ion-input aria-label="Task name" value="Call mom"></ion-input>
28+
</ion-item>
29+
<ion-item>
30+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
31+
<ion-input aria-label="Task name" value="Order more dog food"></ion-input>
32+
</ion-item>
33+
<ion-item>
34+
<ion-checkbox slot="start" aria-label="Toggle task completion"></ion-checkbox>
35+
<ion-input aria-label="Task name" value="Think of new tasks for this demo"></ion-input>
36+
</ion-item>
37+
</ion-list>
38+
</ion-content>
39+
```

‎static/usage/v7/item/content-types/controls/angular/example_component_ts.md‎

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

0 commit comments

Comments
 (0)