Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(tab): remove references to using Stencil with tab #2932

Merged
merged 2 commits into from
Apr 26, 2023
Merged

docs(tab): remove references to using Stencil with tab #2932

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab076cf
docs(tab): remove references to using Stencil with tab
mapsandapps Apr 25, 2023
e69d5ee
docs(tab): remove Stencil code usage for tab
mapsandapps Apr 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 1 addition & 41 deletions docs/api/tab-bar.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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