Skip to content

Commit

Permalink
docs(tab): remove references to using Stencil with tab (#2932)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mapsandapps
mapsandapps authored Apr 26, 2023
1 parent 7a9f3b3 commit ba21d4e
Show file tree
Hide file tree
Showing 9 changed files with 9 additions and 307 deletions.
42 changes: 1 addition & 41 deletions docs/api/tab-bar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md

## Usage

<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' }]}>
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

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


<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'tab-bar-example',
styleUrl: 'tab-bar-example.css'
})
export class TabBarExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="account" component="page-account"></ion-tab>
<ion-tab tab="contact" component="page-contact"></ion-tab>
<ion-tab tab="settings" component="page-settings"></ion-tab>

{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
];
}
}
```


</TabItem>


<TabItem value="vue">

```html
Expand Down
64 changes: 1 addition & 63 deletions docs/api/tab-button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.

## Usage

<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' }]}>
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

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


<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'tab-button-example',
styleUrl: 'tab-button-example.css'
})
export class TabButtonExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>

<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>

<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>

<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>

{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar" aria-hidden="true"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="person-circle" aria-hidden="true"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map" aria-hidden="true"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle" aria-hidden="true"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
];
}
}
```


</TabItem>


<TabItem value="vue">

```html
Expand Down
2 changes: 1 addition & 1 deletion docs/api/tab.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
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.

:::note
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.
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.
:::


Expand Down
40 changes: 1 addition & 39 deletions versioned_docs/version-v5/api/tab-bar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md

## Usage

<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' }]}>
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

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

</TabItem>

<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'tab-bar-example',
styleUrl: 'tab-bar-example.css',
})
export class TabBarExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="account" component="page-account"></ion-tab>
<ion-tab tab="contact" component="page-contact"></ion-tab>
<ion-tab tab="settings" component="page-settings"></ion-tab>

{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>,
];
}
}
```

</TabItem>

<TabItem value="vue">

```html
Expand Down
62 changes: 1 addition & 61 deletions versioned_docs/version-v5/api/tab-button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ See the [tabs documentation](tabs.md) for more details on configuring tabs.

## Usage

<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' }]}>
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

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

</TabItem>

<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'tab-button-example',
styleUrl: 'tab-button-example.css',
})
export class TabButtonExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="schedule">
<ion-router-outlet name="schedule"></ion-router-outlet>
</ion-tab>

<ion-tab tab="speakers">
<ion-router-outlet name="speakers"></ion-router-outlet>
</ion-tab>

<ion-tab tab="map">
<ion-router-outlet name="map"></ion-router-outlet>
</ion-tab>

<ion-tab tab="about">
<ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>

{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-tab-button>

<ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>

<ion-tab-button tab="map" href="/app/tabs/(map:map)">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>

<ion-tab-button tab="about" href="/app/tabs/(about:about)">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>,
];
}
}
```

</TabItem>

<TabItem value="vue">

```html
Expand Down
2 changes: 1 addition & 1 deletion versioned_docs/version-v5/api/tab.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import Slots from '@ionic-internal/component-api/v5/tab/slots.md';

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.

> 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.
> 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.
See the [tabs documentation](tabs.md) for more details on configuring tabs.

Expand Down
40 changes: 1 addition & 39 deletions versioned_docs/version-v6/api/tab-bar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ The tab bar is a UI component that contains a set of [tab buttons](tab-button.md

## Usage

<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' }]}>
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}>

<TabItem value="angular">

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

</TabItem>

<TabItem value="stencil">

```tsx
import { Component, h } from '@stencil/core';

@Component({
tag: 'tab-bar-example',
styleUrl: 'tab-bar-example.css',
})
export class TabBarExample {
render() {
return [
<ion-tabs>
{/* Tab views */}
<ion-tab tab="account" component="page-account"></ion-tab>
<ion-tab tab="contact" component="page-contact"></ion-tab>
<ion-tab tab="settings" component="page-settings"></ion-tab>

{/* Tab bar */}
<ion-tab-bar slot="bottom">
<ion-tab-button tab="account">
<ion-icon name="person"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="contact">
<ion-icon name="call"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>,
];
}
}
```

</TabItem>

<TabItem value="vue">

```html
Expand Down
Loading

1 comment on commit ba21d4e

@vercel
Copy link

@vercel vercel bot commented on ba21d4e Apr 26, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-gqykycf8t.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-git-main-ionic1.vercel.app

Please sign in to comment.