Skip to content

Commit 8c9a292

Browse files
brandyscarneybrandyscarney
committed
docs(tabs): fix basic usage
1 parent 9899fb6 commit 8c9a292

File tree

5 files changed

+53
-48
lines changed

5 files changed

+53
-48
lines changed

‎static/usage/v8/tabs/basic/angular/example_component_html.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```html
22
<ion-tabs>
33
<ion-tab tab="home">
4-
<div id="home-page">
4+
<div id="home-page" class="ion-page">
55
<ion-header>
66
<ion-toolbar>
77
<ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
1313
</div>
1414
</ion-tab>
1515
<ion-tab tab="radio">
16-
<div id="radio-page">
16+
<div id="radio-page" class="ion-page">
1717
<ion-header>
1818
<ion-toolbar>
1919
<ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
2525
</div>
2626
</ion-tab>
2727
<ion-tab tab="library">
28-
<div id="library-page">
28+
<div id="library-page" class="ion-page">
2929
<ion-header>
3030
<ion-toolbar>
3131
<ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
3737
</div>
3838
</ion-tab>
3939
<ion-tab tab="search">
40-
<div id="search-page">
40+
<div id="search-page" class="ion-page">
4141
<ion-header>
4242
<ion-toolbar>
4343
<ion-title>Search</ion-title>

‎static/usage/v8/tabs/basic/demo.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<ion-app>
2323
<ion-tabs>
2424
<ion-tab tab="home">
25-
<div id="home-page">
25+
<div id="home-page" class="ion-page">
2626
<ion-header>
2727
<ion-toolbar>
2828
<ion-title>Listen now</ion-title>
@@ -34,7 +34,7 @@
3434
</div>
3535
</ion-tab>
3636
<ion-tab tab="radio">
37-
<div id="radio-page">
37+
<div id="radio-page" class="ion-page">
3838
<ion-header>
3939
<ion-toolbar>
4040
<ion-title>Radio</ion-title>
@@ -46,7 +46,7 @@
4646
</div>
4747
</ion-tab>
4848
<ion-tab tab="library">
49-
<div id="library-page">
49+
<div id="library-page" class="ion-page">
5050
<ion-header>
5151
<ion-toolbar>
5252
<ion-title>Library</ion-title>
@@ -58,7 +58,7 @@
5858
</div>
5959
</ion-tab>
6060
<ion-tab tab="search">
61-
<div id="search-page">
61+
<div id="search-page" class="ion-page">
6262
<ion-header>
6363
<ion-toolbar>
6464
<ion-title>Search</ion-title>

‎static/usage/v8/tabs/basic/javascript/index_html.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
```html
22
<ion-tabs>
33
<ion-tab tab="home">
4-
<div id="home-page">
4+
<div id="home-page" class="ion-page">
55
<ion-header>
66
<ion-toolbar>
77
<ion-title>Listen now</ion-title>
@@ -13,7 +13,7 @@
1313
</div>
1414
</ion-tab>
1515
<ion-tab tab="radio">
16-
<div id="radio-page">
16+
<div id="radio-page" class="ion-page">
1717
<ion-header>
1818
<ion-toolbar>
1919
<ion-title>Radio</ion-title>
@@ -25,7 +25,7 @@
2525
</div>
2626
</ion-tab>
2727
<ion-tab tab="library">
28-
<div id="library-page">
28+
<div id="library-page" class="ion-page">
2929
<ion-header>
3030
<ion-toolbar>
3131
<ion-title>Library</ion-title>
@@ -37,7 +37,7 @@
3737
</div>
3838
</ion-tab>
3939
<ion-tab tab="search">
40-
<div id="search-page">
40+
<div id="search-page" class="ion-page">
4141
<ion-header>
4242
<ion-toolbar>
4343
<ion-title>Search</ion-title>

‎static/usage/v8/tabs/basic/react/main_tsx.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
```tsx
22
import React from 'react';
33
import {
4-
IonTabs,
4+
IonContent,
5+
IonIcon,
6+
IonHeader,
57
IonTab,
6-
IonToolbar,
8+
IonTabs,
79
IonTabBar,
810
IonTabButton,
9-
IonHeader,
1011
IonTitle,
11-
IonContent,
12-
IonIcon,
12+
IonToolbar,
13+
IonPage,
1314
} from '@ionic/react';
1415

1516
import { playCircle, radio, library, search } from 'ionicons/icons';
@@ -20,7 +21,7 @@ function Example() {
2021
return (
2122
<IonTabs>
2223
<IonTab tab="home">
23-
<div id="home-page">
24+
<IonPage id="home-page">
2425
<IonHeader>
2526
<IonToolbar>
2627
<IonTitle>Listen now</IonTitle>
@@ -29,10 +30,10 @@ function Example() {
2930
<IonContent>
3031
<div className="example-content">Listen now content</div>
3132
</IonContent>
32-
</div>
33+
</IonPage>
3334
</IonTab>
3435
<IonTab tab="radio">
35-
<div id="radio-page">
36+
<IonPage id="radio-page">
3637
<IonHeader>
3738
<IonToolbar>
3839
<IonTitle>Radio</IonTitle>
@@ -41,10 +42,10 @@ function Example() {
4142
<IonContent>
4243
<div className="example-content">Radio content</div>
4344
</IonContent>
44-
</div>
45+
</IonPage>
4546
</IonTab>
4647
<IonTab tab="library">
47-
<div id="library-page">
48+
<IonPage id="library-page">
4849
<IonHeader>
4950
<IonToolbar>
5051
<IonTitle>Library</IonTitle>
@@ -53,10 +54,10 @@ function Example() {
5354
<IonContent>
5455
<div className="example-content">Library content</div>
5556
</IonContent>
56-
</div>
57+
</IonPage>
5758
</IonTab>
5859
<IonTab tab="search">
59-
<div id="search-page">
60+
<IonPage id="search-page">
6061
<IonHeader>
6162
<IonToolbar>
6263
<IonTitle>Search</IonTitle>
@@ -65,7 +66,7 @@ function Example() {
6566
<IonContent>
6667
<div className="example-content">Search content</div>
6768
</IonContent>
68-
</div>
69+
</IonPage>
6970
</IonTab>
7071

7172
<IonTabBar slot="bottom">

‎static/usage/v8/tabs/basic/vue.md‎

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,8 @@
11
```html
2-
<style scoped>
3-
/* This style is for demonstration purposes only. */
4-
/* It's not required for the tabs to function. */
5-
.example-content {
6-
display: flex;
7-
align-items: center;
8-
justify-content: center;
9-
height: 100%;
10-
}
11-
</style>
122
<template>
133
<ion-tabs>
144
<ion-tab tab="home">
15-
<div id="home-page">
5+
<ion-page id="home-page">
166
<ion-header>
177
<ion-toolbar>
188
<ion-title>Listen now</ion-title>
@@ -21,10 +11,10 @@
2111
<ion-content>
2212
<div class="example-content">Listen now content</div>
2313
</ion-content>
24-
</div>
14+
</ion-page>
2515
</ion-tab>
2616
<ion-tab tab="radio">
27-
<div id="radio-page">
17+
<ion-page id="radio-page">
2818
<ion-header>
2919
<ion-toolbar>
3020
<ion-title>Radio</ion-title>
@@ -33,10 +23,11 @@
3323
<ion-content>
3424
<div class="example-content">Radio content</div>
3525
</ion-content>
36-
</div>
26+
</ion-page>
3727
</ion-tab>
3828
<ion-tab tab="library">
39-
<div id="library-page">
29+
<ion-page id="library-page"
30+
>>
4031
<ion-header>
4132
<ion-toolbar>
4233
<ion-title>Library</ion-title>
@@ -45,10 +36,11 @@
4536
<ion-content>
4637
<div class="example-content">Library content</div>
4738
</ion-content>
48-
</div>
39+
</ion-page>
4940
</ion-tab>
5041
<ion-tab tab="search">
51-
<div id="search-page">
42+
<ion-page id="search-page"
43+
>>
5244
<ion-header>
5345
<ion-toolbar>
5446
<ion-title>Search</ion-title>
@@ -57,7 +49,7 @@
5749
<ion-content>
5850
<div class="example-content">Search content</div>
5951
</ion-content>
60-
</div>
52+
</ion-page>
6153
</ion-tab>
6254

6355
<ion-tab-bar slot="bottom">
@@ -83,16 +75,28 @@
8375

8476
<script setup lang="ts">
8577
import {
86-
IonTabs,
78+
IonContent,
79+
IonHeader,
80+
IonIcon,
81+
IonPage,
8782
IonTab,
88-
IonToolbar,
83+
IonTabs,
8984
IonTabBar,
9085
IonTabButton,
91-
IonContent,
92-
IonHeader,
9386
IonTitle,
94-
IonIcon,
87+
IonToolbar,
9588
} from '@ionic/vue';
9689
import { playCircle, radio, library, search } from 'ionicons/icons';
9790
</script>
91+
92+
<style scoped>
93+
/* This style is for demonstration purposes only. */
94+
/* It's not required for the tabs to function. */
95+
.example-content {
96+
display: flex;
97+
align-items: center;
98+
justify-content: center;
99+
height: 100%;
100+
}
101+
</style>
98102
```

0 commit comments

Comments
 (0)