javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(stencil): add stencil usage to components (#21261)

Browse Source
This commit is contained in:
Brandy Carney
2020-05-12 20:35:48 -04:00
committed by GitHub
parent 703ef5c992
commit 687122127c
177 changed files with 11207 additions and 897 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
core/src/components/tabs/readme.md
View File

@ -137,7 +137,7 @@ const routes: Routes = [
```
## Activating Tabs
### Activating Tabs
Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
@ -210,6 +210,101 @@ export const TabsExample: React.FC = () => (
```
### Stencil
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'tabs-example',
styleUrl: 'tabs-example.css'
})
export class TabsExample {
render() {
return [
<ion-tabs>
<ion-tab tab="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-map" component="page-map">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-about" component="page-about">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-speaker">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
];
}
}
```
### Activating Tabs
Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
```jsx
<ion-tab tab="settings">
...
</ion-tab>
<ion-tab-button tab="settings">
...
</ion-tab-button>
```
The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
### Router integration
When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
The following route within the scope of an `ion-tabs` outlet:
```tsx
<ion-route url="/settings-page" component="settings"></ion-route>
```
will match the following tab:
```tsx
<ion-tab tab="settings" component="settings-component"></ion-tab>
```
### Vue
```html

2
core/src/components/tabs/usage/javascript.md
View File

@ -44,7 +44,7 @@
```
## Activating Tabs
### Activating Tabs
Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.

91
core/src/components/tabs/usage/stencil.md Normal file
View File

@ -0,0 +1,91 @@
```tsx
import { Component, h } from '@stencil/core';
@Component({
tag: 'tabs-example',
styleUrl: 'tabs-example.css'
})
export class TabsExample {
render() {
return [
<ion-tabs>
<ion-tab tab="tab-schedule">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-speaker">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-map" component="page-map">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab tab="tab-about" component="page-about">
<ion-nav></ion-nav>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab-schedule">
<ion-icon name="calendar"></ion-icon>
<ion-label>Schedule</ion-label>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="tab-speaker">
<ion-icon name="person-circle"></ion-icon>
<ion-label>Speakers</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-map">
<ion-icon name="map"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab-about">
<ion-icon name="information-circle"></ion-icon>
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
];
}
}
```
### Activating Tabs
Each `ion-tab-button` will activate one of the tabs when pressed. In order to link the `ion-tab-button` to the `ion-tab` container, a matching `tab` property should be set on each component.
```jsx
<ion-tab tab="settings">
...
</ion-tab>
<ion-tab-button tab="settings">
...
</ion-tab-button>
```
The `ion-tab-button` and `ion-tab` above are linked by the common `tab` property.
The `tab` property identifies each tab, and it has to be unique within the `ion-tabs`. It's important to always set the `tab` property on the `ion-tab` and `ion-tab-button`, even if one component is not used.
### Router integration
When used with Ionic's router (`ion-router`) the `tab` property of the `ion-tab` matches the `component` property of an `ion-route`.
The following route within the scope of an `ion-tabs` outlet:
```tsx
<ion-route url="/settings-page" component="settings"></ion-route>
```
will match the following tab:
```tsx
<ion-tab tab="settings" component="settings-component"></ion-tab>
```