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

fix(): update to Stencil One 🎉🎊

Browse Source
This commit is contained in:
Manu MA
2019-06-19 21:33:50 +02:00
committed by GitHub
parent 7f1829eb21
commit b40f7d36d5
572 changed files with 14426 additions and 9916 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,39 +92,35 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
```tsx
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
export const TabButtonExample: React.FunctionComponent = () => (
<IonContent>
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon name="calendar" />
<IonLabel>Schedule</IonLabel>
</IonTabButton>
const Example: React.SFC<{}> = () => (
<IonTabButton tab="speakers">
<IonIcon name="contacts" />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabs>
<IonTabButton tab="map">
<IonIcon name="map" />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon name="calendar" />
<IonLabel>Schedule</IonLabel>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon name="contacts" />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon name="map" />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon name="information-circle" />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
<IonTabButton tab="about">
<IonIcon name="information-circle" />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonContent>
);
export default Example;
```
@ -192,6 +188,19 @@ export default Example;
| `--ripple-color` | Color of the button ripple effect |
## Dependencies
### Depends on
- [ion-ripple-effect](../ripple-effect)
### Graph
```mermaid
graph TD;
ion-tab-button --> ion-ripple-effect
style ion-tab-button fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

20
core/src/components/tab-button/tab-button.tsx
View File

@ -1,8 +1,12 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, h } from '@stencil/core';
import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import { getIonMode } from '../../global/ionic-global';
import { Config, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import { AnchorInterface } from '../../utils/element-interface';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-tab-button',
styleUrls: {
@ -19,11 +23,6 @@ export class TabButton implements ComponentInterface, AnchorInterface {
@Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'config' }) config!: Config;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the tab button.
*/
@ -79,7 +78,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
*/
@Event() ionTabButtonClick!: EventEmitter<TabButtonClickEventDetail>;
@Listen('parent:ionTabBarChanged')
@Listen('ionTabBarChanged', { target: 'parent' })
onTabBarChanged(ev: CustomEvent<TabBarChangedEventDetail>) {
this.selected = this.tab === ev.detail.tab;
}
@ -137,13 +136,14 @@ export class TabButton implements ComponentInterface, AnchorInterface {
hostData() {
const { disabled, hasIcon, hasLabel, tabIndex, layout, selected, tab } = this;
const mode = getIonMode(this);
return {
'tabindex': tabIndex,
'role': 'tab',
'aria-selected': selected ? 'true' : null,
'id': tab !== undefined ? `tab-button-${tab}` : null,
class: {
[`${this.mode}`]: true,
[`${mode}`]: true,
'tab-selected': selected,
'tab-disabled': disabled,
'tab-has-label': hasLabel,
@ -159,7 +159,7 @@ export class TabButton implements ComponentInterface, AnchorInterface {
}
render() {
const { mode } = this;
const mode = getIonMode(this);
const attrs = {
download: this.download,

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

@ -1,36 +1,32 @@
```tsx
import React from 'react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonContent } from '@ionic/react';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
export const TabButtonExample: React.FunctionComponent = () => (
<IonContent>
<IonTabs>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon name="calendar" />
<IonLabel>Schedule</IonLabel>
</IonTabButton>
const Example: React.SFC<{}> = () => (
<IonTabButton tab="speakers">
<IonIcon name="contacts" />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabs>
<IonTabButton tab="map">
<IonIcon name="map" />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule">
<IonIcon name="calendar" />
<IonLabel>Schedule</IonLabel>
</IonTabButton>
<IonTabButton tab="speakers">
<IonIcon name="contacts" />
<IonLabel>Speakers</IonLabel>
</IonTabButton>
<IonTabButton tab="map">
<IonIcon name="map" />
<IonLabel>Map</IonLabel>
</IonTabButton>
<IonTabButton tab="about">
<IonIcon name="information-circle" />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
<IonTabButton tab="about">
<IonIcon name="information-circle" />
<IonLabel>About</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonContent>
);
export default Example;
```