Skip to content

Commit 92b2ee6

Browse files
brandyscarneybrandyscarney
committed
docs(card): update angular to standalone
1 parent c5926f0 commit 92b2ee6

24 files changed

+486
-16
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-card>
3+
<ion-card-header>
4+
<ion-card-title>Card Title</ion-card-title>
5+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
6+
</ion-card-header>
7+
8+
<ion-card-content>
9+
Here's a small text description for the card content. Nothing more, nothing less.
10+
</ion-card-content>
11+
</ion-card>
12+
```

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

‎static/usage/v7/card/basic/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/card/basic/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/card/basic/demo.html"
24+
/>

‎static/usage/v7/card/buttons/angular/example_component_html.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-card>
3+
<ion-card-header>
4+
<ion-card-title>Card Title</ion-card-title>
5+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
6+
</ion-card-header>
7+
8+
<ion-card-content>
9+
Here's a small text description for the card content. Nothing more, nothing less.
10+
</ion-card-content>
11+
12+
<ion-button fill="clear">Action 1</ion-button>
13+
<ion-button fill="clear">Action 2</ion-button>
14+
</ion-card>
15+
```

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

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

‎static/usage/v7/card/buttons/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/card/buttons/demo.html" size="300px" />
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/card/buttons/demo.html"
24+
size="300px"
25+
/>

‎static/usage/v7/card/media/angular/example_component_html.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```html
2+
<ion-card>
3+
<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
4+
<ion-card-header>
5+
<ion-card-title>Card Title</ion-card-title>
6+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
7+
</ion-card-header>
8+
9+
<ion-card-content>
10+
Here's a small text description for the card content. Nothing more, nothing less.
11+
</ion-card-content>
12+
</ion-card>
13+
```

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

‎static/usage/v7/card/media/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/card/media/demo.html" size="350px" />
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/card/media/demo.html"
24+
size="350px"
25+
/>

‎static/usage/v7/card/theming/colors/angular/example_component_html.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
```html
2+
<ion-card color="primary">
3+
<ion-card-header>
4+
<ion-card-title>Card Title</ion-card-title>
5+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
6+
</ion-card-header>
7+
8+
<ion-card-content> Card Content </ion-card-content>
9+
</ion-card>
10+
11+
<ion-card color="secondary">
12+
<ion-card-header>
13+
<ion-card-title>Card Title</ion-card-title>
14+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
15+
</ion-card-header>
16+
17+
<ion-card-content> Card Content </ion-card-content>
18+
</ion-card>
19+
20+
<ion-card color="tertiary">
21+
<ion-card-header>
22+
<ion-card-title>Card Title</ion-card-title>
23+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
24+
</ion-card-header>
25+
26+
<ion-card-content> Card Content </ion-card-content>
27+
</ion-card>
28+
29+
<ion-card color="success">
30+
<ion-card-header>
31+
<ion-card-title>Card Title</ion-card-title>
32+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
33+
</ion-card-header>
34+
35+
<ion-card-content> Card Content </ion-card-content>
36+
</ion-card>
37+
38+
<ion-card color="warning">
39+
<ion-card-header>
40+
<ion-card-title>Card Title</ion-card-title>
41+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
42+
</ion-card-header>
43+
44+
<ion-card-content> Card Content </ion-card-content>
45+
</ion-card>
46+
47+
<ion-card color="danger">
48+
<ion-card-header>
49+
<ion-card-title>Card Title</ion-card-title>
50+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
51+
</ion-card-header>
52+
53+
<ion-card-content> Card Content </ion-card-content>
54+
</ion-card>
55+
56+
<ion-card color="light">
57+
<ion-card-header>
58+
<ion-card-title>Card Title</ion-card-title>
59+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
60+
</ion-card-header>
61+
62+
<ion-card-content> Card Content </ion-card-content>
63+
</ion-card>
64+
65+
<ion-card color="medium">
66+
<ion-card-header>
67+
<ion-card-title>Card Title</ion-card-title>
68+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
69+
</ion-card-header>
70+
71+
<ion-card-content> Card Content </ion-card-content>
72+
</ion-card>
73+
74+
<ion-card color="dark">
75+
<ion-card-header>
76+
<ion-card-title>Card Title</ion-card-title>
77+
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
78+
</ion-card-header>
79+
80+
<ion-card-content> Card Content </ion-card-content>
81+
</ion-card>
82+
```

0 commit comments

Comments
 (0)