Skip to content

Commit 8c519ca

Browse files
brandyscarneybrandyscarney
committed
docs(breadcrumbs): update angular to standalone
1 parent c5926f0 commit 8c519ca

File tree

32 files changed

+374
-16
lines changed

32 files changed

+374
-16
lines changed

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
```html
2+
<ion-breadcrumbs>
3+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
4+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
5+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
6+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
7+
</ion-breadcrumbs>
8+
```

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

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

‎static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
```ts
22
import { Component, ViewChild } from '@angular/core';
3+
import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular/standalone';
34

45
@Component({
56
selector: 'app-example',
67
templateUrl: 'example.component.html',
8+
imports: [IonBreadcrumb, IonBreadcrumbs],
79
})
810
export class ExampleComponent {
911
maxBreadcrumbs = 4;

‎static/usage/v7/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```html
2+
<div>Before Collapse = 2</div>
3+
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2">
4+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
5+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
6+
<ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
7+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
8+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
9+
<ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
10+
</ion-breadcrumbs>
11+
12+
<div class="ion-margin-top">Before Collapse = 0</div>
13+
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="0">
14+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
15+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
16+
<ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
17+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
18+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
19+
<ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
20+
</ion-breadcrumbs>
21+
22+
<div class="ion-margin-top">After Collapse = 2</div>
23+
<ion-breadcrumbs [maxItems]="4" [itemsAfterCollapse]="2">
24+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
25+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
26+
<ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
27+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
28+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
29+
<ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
30+
</ion-breadcrumbs>
31+
32+
<div class="ion-margin-top">Before Collapse = 2, After Collapse = 2</div>
33+
<ion-breadcrumbs [maxItems]="4" [itemsBeforeCollapse]="2" [itemsAfterCollapse]="2">
34+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
35+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
36+
<ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
37+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
38+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
39+
<ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
40+
</ion-breadcrumbs>
41+
```

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

‎static/usage/v7/breadcrumbs/collapsing-items/items-before-after/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"
1012
size="300px"
11-
code={{ javascript, react, vue, angular }}
13+
code={{
14+
javascript,
15+
react,
16+
vue,
17+
angular: {
18+
files: {
19+
'src/app/example.component.html': angular_example_component_html,
20+
'src/app/example.component.ts': angular_example_component_ts,
21+
},
22+
},
23+
}}
1224
src="usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html"
1325
/>

‎static/usage/v7/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```html
2+
<ion-breadcrumbs [maxItems]="4">
3+
<ion-breadcrumb href="#home">Home</ion-breadcrumb>
4+
<ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
5+
<ion-breadcrumb href="#photography">Photography</ion-breadcrumb>
6+
<ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
7+
<ion-breadcrumb href="#film">Film</ion-breadcrumb>
8+
<ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
9+
</ion-breadcrumbs>
10+
```

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

‎static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +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"
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/breadcrumbs/collapsing-items/max-items/demo.html"
1224
/>

0 commit comments

Comments
 (0)