Skip to content

Commit 2d409c1

Browse files
brandyscarneybrandyscarney
committed
docs(footer): update angular to standalone
1 parent c5926f0 commit 2d409c1

24 files changed

+508
-16
lines changed

‎static/usage/v7/footer/basic/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-content class="ion-padding">
3+
<h1>Content</h1>
4+
</ion-content>
5+
<ion-footer>
6+
<ion-toolbar>
7+
<ion-title>Footer</ion-title>
8+
</ion-toolbar>
9+
</ion-footer>
10+
```

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

‎static/usage/v7/footer/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/footer/basic/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/footer/fade/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-content class="ion-padding">
3+
<h1>Animal Facts</h1>
4+
5+
<h2>Rhinoceros</h2>
6+
<img
7+
alt="rhino standing near grass"
8+
src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
9+
/>
10+
<p>
11+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
12+
Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
13+
species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
14+
the Javan rhino and one-horned rhino have one horn.
15+
</p>
16+
17+
<h2>Sea Turtle</h2>
18+
<img
19+
alt="brown sea turtle in water"
20+
src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
21+
/>
22+
<p>
23+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
24+
sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
25+
swimming, so they are vulnerable while on land.
26+
</p>
27+
28+
<h2>Giraffe</h2>
29+
<img
30+
alt="giraffe sticking its tongue out"
31+
src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
32+
/>
33+
<p>
34+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
35+
spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
36+
giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
37+
</p>
38+
39+
<h2>Elephant</h2>
40+
<img
41+
alt="two grey elephants on grass plains during sunset"
42+
src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
43+
/>
44+
<p>
45+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
46+
trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
47+
water for drinking or bathing.
48+
</p>
49+
50+
<h2>Dolphin</h2>
51+
<img
52+
alt="black and white dolphin in water"
53+
src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
54+
/>
55+
<p>
56+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
57+
and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
58+
and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
59+
pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
60+
</p>
61+
</ion-content>
62+
<ion-footer collapse="fade">
63+
<ion-toolbar>
64+
<ion-title>Footer</ion-title>
65+
</ion-toolbar>
66+
</ion-footer>
67+
```

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

‎static/usage/v7/footer/fade/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/footer/fade/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/footer/no-border/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-content class="ion-padding">
3+
<h1>Content</h1>
4+
</ion-content>
5+
<ion-footer class="ion-no-border">
6+
<ion-toolbar>
7+
<ion-title>Footer</ion-title>
8+
</ion-toolbar>
9+
</ion-footer>
10+
```

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

‎static/usage/v7/footer/no-border/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/footer/no-border/demo.html"
1224
devicePreview
1325
includeIonContent={false}

‎static/usage/v7/footer/translucent/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-content [fullscreen]="true" class="ion-padding">
3+
<h1>Animal Facts</h1>
4+
5+
<h2>Rhinoceros</h2>
6+
<img
7+
alt="rhino standing near grass"
8+
src="https://images.unsplash.com/flagged/photo-1556983257-71fddc36bc75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
9+
/>
10+
<p>
11+
The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the
12+
Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the
13+
species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while
14+
the Javan rhino and one-horned rhino have one horn.
15+
</p>
16+
17+
<h2>Sea Turtle</h2>
18+
<img
19+
alt="brown sea turtle in water"
20+
src="https://images.unsplash.com/photo-1573551089778-46a7abc39d9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80"
21+
/>
22+
<p>
23+
Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles,
24+
sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for
25+
swimming, so they are vulnerable while on land.
26+
</p>
27+
28+
<h2>Giraffe</h2>
29+
<img
30+
alt="giraffe sticking its tongue out"
31+
src="https://images.unsplash.com/photo-1577114995803-d8ce0e2b4aa9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1746&q=80"
32+
/>
33+
<p>
34+
Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a
35+
spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the
36+
giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.
37+
</p>
38+
39+
<h2>Elephant</h2>
40+
<img
41+
alt="two grey elephants on grass plains during sunset"
42+
src="https://images.unsplash.com/photo-1564760055775-d63b17a55c44?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1754&q=80"
43+
/>
44+
<p>
45+
Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long
46+
trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up
47+
water for drinking or bathing.
48+
</p>
49+
50+
<h2>Dolphin</h2>
51+
<img
52+
alt="black and white dolphin in water"
53+
src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
54+
/>
55+
<p>
56+
Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue,
57+
and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth
58+
and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a
59+
pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.
60+
</p>
61+
</ion-content>
62+
<ion-footer [translucent]="true">
63+
<ion-toolbar>
64+
<ion-title>Footer</ion-title>
65+
</ion-toolbar>
66+
</ion-footer>
67+
```

0 commit comments

Comments
 (0)