Skip to content

Commit ba21d4e

Browse files
mapsandappsmapsandapps
authored
docs(tab): remove references to using Stencil with tab (#2932)
1 parent 7a9f3b3 commit ba21d4e

File tree

9 files changed

+9
-307
lines changed

9 files changed

+9
-307
lines changed

‎docs/api/tab-bar.md

+1-41
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
2828

2929
## Usage
3030

31-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
31+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
3232

3333
<TabItem value="angular">
3434

@@ -110,46 +110,6 @@ export const TabBarExample: React.FC = () => (
110110
</TabItem>
111111

112112

113-
<TabItem value="stencil">
114-
115-
```tsx
116-
import { Component, h } from '@stencil/core';
117-
118-
@Component({
119-
tag: 'tab-bar-example',
120-
styleUrl: 'tab-bar-example.css'
121-
})
122-
export class TabBarExample {
123-
render() {
124-
return [
125-
<ion-tabs>
126-
{/* Tab views */}
127-
<ion-tab tab="account" component="page-account"></ion-tab>
128-
<ion-tab tab="contact" component="page-contact"></ion-tab>
129-
<ion-tab tab="settings" component="page-settings"></ion-tab>
130-
131-
{/* Tab bar */}
132-
<ion-tab-bar slot="bottom">
133-
<ion-tab-button tab="account">
134-
<ion-icon name="person"></ion-icon>
135-
</ion-tab-button>
136-
<ion-tab-button tab="contact">
137-
<ion-icon name="call"></ion-icon>
138-
</ion-tab-button>
139-
<ion-tab-button tab="settings">
140-
<ion-icon name="settings"></ion-icon>
141-
</ion-tab-button>
142-
</ion-tab-bar>
143-
</ion-tabs>
144-
];
145-
}
146-
}
147-
```
148-
149-
150-
</TabItem>
151-
152-
153113
<TabItem value="vue">
154114

155115
```html

‎docs/api/tab-button.md

+1-63
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
2727

2828
## Usage
2929

30-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
30+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
3131

3232
<TabItem value="angular">
3333

@@ -153,68 +153,6 @@ export const TabButtonExample: React.FC = () => (
153153
</TabItem>
154154

155155

156-
<TabItem value="stencil">
157-
158-
```tsx
159-
import { Component, h } from '@stencil/core';
160-
161-
@Component({
162-
tag: 'tab-button-example',
163-
styleUrl: 'tab-button-example.css'
164-
})
165-
export class TabButtonExample {
166-
render() {
167-
return [
168-
<ion-tabs>
169-
{/* Tab views */}
170-
<ion-tab tab="schedule">
171-
<ion-router-outlet name="schedule"></ion-router-outlet>
172-
</ion-tab>
173-
174-
<ion-tab tab="speakers">
175-
<ion-router-outlet name="speakers"></ion-router-outlet>
176-
</ion-tab>
177-
178-
<ion-tab tab="map">
179-
<ion-router-outlet name="map"></ion-router-outlet>
180-
</ion-tab>
181-
182-
<ion-tab tab="about">
183-
<ion-router-outlet name="about"></ion-router-outlet>
184-
</ion-tab>
185-
186-
{/* Tab bar */}
187-
<ion-tab-bar slot="bottom">
188-
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
189-
<ion-icon name="calendar" aria-hidden="true"></ion-icon>
190-
<ion-label>Schedule</ion-label>
191-
</ion-tab-button>
192-
193-
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
194-
<ion-icon name="person-circle" aria-hidden="true"></ion-icon>
195-
<ion-label>Speakers</ion-label>
196-
</ion-tab-button>
197-
198-
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
199-
<ion-icon name="map" aria-hidden="true"></ion-icon>
200-
<ion-label>Map</ion-label>
201-
</ion-tab-button>
202-
203-
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
204-
<ion-icon name="information-circle" aria-hidden="true"></ion-icon>
205-
<ion-label>About</ion-label>
206-
</ion-tab-button>
207-
</ion-tab-bar>
208-
</ion-tabs>
209-
];
210-
}
211-
}
212-
```
213-
214-
215-
</TabItem>
216-
217-
218156
<TabItem value="vue">
219157

220158
```html

‎docs/api/tab.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2222
The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
2323

2424
:::note
25-
Note: This component should only be used with vanilla or Stencil JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
25+
Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
2626
:::
2727

2828

‎versioned_docs/version-v5/api/tab-bar.md

+1-39
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
1818

1919
## Usage
2020

21-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
21+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
2222

2323
<TabItem value="angular">
2424

@@ -96,44 +96,6 @@ export const TabBarExample: React.FC = () => (
9696

9797
</TabItem>
9898

99-
<TabItem value="stencil">
100-
101-
```tsx
102-
import { Component, h } from '@stencil/core';
103-
104-
@Component({
105-
tag: 'tab-bar-example',
106-
styleUrl: 'tab-bar-example.css',
107-
})
108-
export class TabBarExample {
109-
render() {
110-
return [
111-
<ion-tabs>
112-
{/* Tab views */}
113-
<ion-tab tab="account" component="page-account"></ion-tab>
114-
<ion-tab tab="contact" component="page-contact"></ion-tab>
115-
<ion-tab tab="settings" component="page-settings"></ion-tab>
116-
117-
{/* Tab bar */}
118-
<ion-tab-bar slot="bottom">
119-
<ion-tab-button tab="account">
120-
<ion-icon name="person"></ion-icon>
121-
</ion-tab-button>
122-
<ion-tab-button tab="contact">
123-
<ion-icon name="call"></ion-icon>
124-
</ion-tab-button>
125-
<ion-tab-button tab="settings">
126-
<ion-icon name="settings"></ion-icon>
127-
</ion-tab-button>
128-
</ion-tab-bar>
129-
</ion-tabs>,
130-
];
131-
}
132-
}
133-
```
134-
135-
</TabItem>
136-
13799
<TabItem value="vue">
138100

139101
```html

‎versioned_docs/version-v5/api/tab-button.md

+1-61
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.
2020

2121
## Usage
2222

23-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
23+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
2424

2525
<TabItem value="angular">
2626

@@ -140,66 +140,6 @@ export const TabButtonExample: React.FC = () => (
140140

141141
</TabItem>
142142

143-
<TabItem value="stencil">
144-
145-
```tsx
146-
import { Component, h } from '@stencil/core';
147-
148-
@Component({
149-
tag: 'tab-button-example',
150-
styleUrl: 'tab-button-example.css',
151-
})
152-
export class TabButtonExample {
153-
render() {
154-
return [
155-
<ion-tabs>
156-
{/* Tab views */}
157-
<ion-tab tab="schedule">
158-
<ion-router-outlet name="schedule"></ion-router-outlet>
159-
</ion-tab>
160-
161-
<ion-tab tab="speakers">
162-
<ion-router-outlet name="speakers"></ion-router-outlet>
163-
</ion-tab>
164-
165-
<ion-tab tab="map">
166-
<ion-router-outlet name="map"></ion-router-outlet>
167-
</ion-tab>
168-
169-
<ion-tab tab="about">
170-
<ion-router-outlet name="about"></ion-router-outlet>
171-
</ion-tab>
172-
173-
{/* Tab bar */}
174-
<ion-tab-bar slot="bottom">
175-
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
176-
<ion-icon name="calendar"></ion-icon>
177-
<ion-label>Schedule</ion-label>
178-
</ion-tab-button>
179-
180-
<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
181-
<ion-icon name="person-circle"></ion-icon>
182-
<ion-label>Speakers</ion-label>
183-
</ion-tab-button>
184-
185-
<ion-tab-button tab="map" href="/app/tabs/(map:map)">
186-
<ion-icon name="map"></ion-icon>
187-
<ion-label>Map</ion-label>
188-
</ion-tab-button>
189-
190-
<ion-tab-button tab="about" href="/app/tabs/(about:about)">
191-
<ion-icon name="information-circle"></ion-icon>
192-
<ion-label>About</ion-label>
193-
</ion-tab-button>
194-
</ion-tab-bar>
195-
</ion-tabs>,
196-
];
197-
}
198-
}
199-
```
200-
201-
</TabItem>
202-
203143
<TabItem value="vue">
204144

205145
```html

‎versioned_docs/version-v5/api/tab.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/tab/slots.md';
1616

1717
The tab component is a child component of [tabs](tabs.md). Each tab can contain a top level navigation stack for an app or a single view. An app can have many tabs, all with their own independent navigation.
1818

19-
> Note: This component should only be used with vanilla or Stencil JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
19+
> Note: This component should only be used with vanilla JavaScript projects. For Angular, React, and Vue apps you do not need to use `ion-tab` to declare your tab components.
2020
2121
See the [tabs documentation](tabs.md) for more details on configuring tabs.
2222

‎versioned_docs/version-v6/api/tab-bar.md

+1-39
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md
2828

2929
## Usage
3030

31-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
31+
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>
3232

3333
<TabItem value="angular">
3434

@@ -106,44 +106,6 @@ export const TabBarExample: React.FC = () => (
106106

107107
</TabItem>
108108

109-
<TabItem value="stencil">
110-
111-
```tsx
112-
import { Component, h } from '@stencil/core';
113-
114-
@Component({
115-
tag: 'tab-bar-example',
116-
styleUrl: 'tab-bar-example.css',
117-
})
118-
export class TabBarExample {
119-
render() {
120-
return [
121-
<ion-tabs>
122-
{/* Tab views */}
123-
<ion-tab tab="account" component="page-account"></ion-tab>
124-
<ion-tab tab="contact" component="page-contact"></ion-tab>
125-
<ion-tab tab="settings" component="page-settings"></ion-tab>
126-
127-
{/* Tab bar */}
128-
<ion-tab-bar slot="bottom">
129-
<ion-tab-button tab="account">
130-
<ion-icon name="person"></ion-icon>
131-
</ion-tab-button>
132-
<ion-tab-button tab="contact">
133-
<ion-icon name="call"></ion-icon>
134-
</ion-tab-button>
135-
<ion-tab-button tab="settings">
136-
<ion-icon name="settings"></ion-icon>
137-
</ion-tab-button>
138-
</ion-tab-bar>
139-
</ion-tabs>,
140-
];
141-
}
142-
}
143-
```
144-
145-
</TabItem>
146-
147109
<TabItem value="vue">
148110

149111
```html

0 commit comments

Comments
 (0)