Skip to content

Commit 9c0665f

Browse files
brandyscarneybrandyscarney
committed
docs(label): update angular to standalone
1 parent c5926f0 commit 9c0665f

24 files changed

+380
-16
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
```html
2+
<ion-label>Label</ion-label>
3+
```

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

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

‎static/usage/v7/label/input/angular/example_component_html.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</ion-label>
4+
<ion-input placeholder="Enter text"></ion-input>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-label position="fixed">Fixed Label</ion-label>
9+
<ion-input placeholder="Enter text"></ion-input>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label position="floating">Floating Label</ion-label>
14+
<ion-input placeholder="Enter text"></ion-input>
15+
</ion-item>
16+
17+
<ion-item>
18+
<ion-label position="stacked">Stacked Label</ion-label>
19+
<ion-input placeholder="Enter text"></ion-input>
20+
</ion-item>
21+
22+
<ion-item>
23+
<ion-label>Toggle</ion-label>
24+
<ion-toggle slot="end" checked></ion-toggle>
25+
</ion-item>
26+
27+
<ion-item>
28+
<ion-checkbox slot="start" checked></ion-checkbox>
29+
<ion-label>Checkbox</ion-label>
30+
</ion-item>
31+
```

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

‎static/usage/v7/label/input/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/label/input/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/label/input/demo.html"
24+
size="medium"
25+
/>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```html
2+
<ion-item>
3+
<ion-label>Default Label</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>Heading</h1>
23+
<p>Paragraph</p>
24+
</ion-label>
25+
</ion-item>
26+
```

‎static/usage/v7/label/item/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/label/item/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/label/item/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/label/item/demo.html"
24+
size="medium"
25+
/>

‎static/usage/v7/label/theming/colors/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-label>Default</ion-label>
3+
<ion-label color="primary">Primary</ion-label>
4+
<ion-label color="secondary">Secondary</ion-label>
5+
<ion-label color="tertiary">Tertiary</ion-label>
6+
<ion-label color="success">Success</ion-label>
7+
<ion-label color="warning">Warning</ion-label>
8+
<ion-label color="danger">Danger</ion-label>
9+
<ion-label color="light">Light</ion-label>
10+
<ion-label color="medium">Medium</ion-label>
11+
<ion-label color="dark">Dark</ion-label>
12+
```

0 commit comments

Comments
 (0)