javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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

100
core/src/components/tab-button/readme.md
View File

@ -14,7 +14,7 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
```html
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
@ -36,7 +36,6 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```
@ -45,7 +44,24 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
```html
<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>
@ -67,23 +83,6 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
<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>
</ion-tabs>
```
@ -98,6 +97,7 @@ import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
export const TabButtonExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />
@ -125,12 +125,71 @@ export const TabButtonExample: React.FC = () => (
```
### 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>
];
}
}
```
### Vue
```html
<template>
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
@ -152,7 +211,6 @@ export const TabButtonExample: React.FC = () => (
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
```

3
core/src/components/tab-button/usage/angular.md
View File

@ -1,6 +1,6 @@
```html
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
@ -22,6 +22,5 @@
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
```

34
core/src/components/tab-button/usage/javascript.md
View File

@ -1,6 +1,23 @@
```html
<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>
@ -22,22 +39,5 @@
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
<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>
</ion-tabs>
```

1
core/src/components/tab-button/usage/react.md
View File

@ -6,6 +6,7 @@ import { calendar, personCircle, map, informationCircle } from 'ionicons/icons';
export const TabButtonExample: React.FC = () => (
<IonContent>
<IonTabs>
{/*-- Tab bar --*/}
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon icon={calendar} />

55
core/src/components/tab-button/usage/stencil.md Normal file
View File

@ -0,0 +1,55 @@
```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>
];
}
}
```

3
core/src/components/tab-button/usage/vue.md
View File

@ -1,7 +1,7 @@
```html
<template>
<ion-tabs>
<!-- Tab bar -->
<ion-tab-bar slot="bottom">
<ion-tab-button tab="schedule">
<ion-icon name="calendar"></ion-icon>
@ -23,7 +23,6 @@
<ion-label>About</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</template>
```