mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
fix(): update to Stencil One 🎉🎊
This commit is contained in:
Manu MA
@ -177,11 +177,9 @@ will match the following tab:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
|
||||
|
||||
const Example: React.SFC<{}> = () => (
|
||||
|
||||
export const TabsExample: React.FunctionComponent = () => (
|
||||
<IonTabs>
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="schedule">
|
||||
@ -207,8 +205,6 @@ const Example: React.SFC<{}> = () => (
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
|
||||
export default Example;
|
||||
```
|
||||
|
||||
|
||||
@ -273,10 +269,10 @@ export default Example;
|
||||
|
||||
## Events
|
||||
|
||||
| Event | Description | Type |
|
||||
| ------------------- | -------------------------------------------------------------------------- | ---------------------------- |
|
||||
| `ionTabsDidChange` | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<{tab: string}>` |
|
||||
| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component. | `CustomEvent<{tab: string}>` |
|
||||
| Event | Description | Type |
|
||||
| ------------------- | -------------------------------------------------------------------------- | ------------------------------- |
|
||||
| `ionTabsDidChange` | Emitted when the navigation has finished transitioning to a new component. | `CustomEvent<{ tab: string; }>` |
|
||||
| `ionTabsWillChange` | Emitted when the navigation is about to transition to a new component. | `CustomEvent<{ tab: string; }>` |
|
||||
|
||||
|
||||
## Methods
|
||||
@ -295,12 +291,6 @@ Type: `Promise<string | undefined>`
|
||||
|
||||
Get a specific tab by the value of its `tab` property or an element reference.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| ----- | ----------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| `tab` | `HTMLIonTabElement \| string` | The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. |
|
||||
|
||||
#### Returns
|
||||
|
||||
Type: `Promise<HTMLIonTabElement | undefined>`
|
||||
@ -311,12 +301,6 @@ Type: `Promise<HTMLIonTabElement | undefined>`
|
||||
|
||||
Select a tab by the value of its `tab` property or an element reference.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| ----- | ----------------------------- | --------------------------------------------------------------------------------------------------- |
|
||||
| `tab` | `HTMLIonTabElement \| string` | The tab instance to select. If passed a string, it should be the value of the tab's `tab` property. |
|
||||
|
||||
#### Returns
|
||||
|
||||
Type: `Promise<boolean>`
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
|
||||
import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, h } from '@stencil/core';
|
||||
|
||||
import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickEventDetail } from '../../interface';
|
||||
|
||||
@ -17,7 +17,7 @@ export class Tabs implements NavOutlet {
|
||||
private transitioning = false;
|
||||
private leavingTab?: HTMLIonTabElement;
|
||||
|
||||
@Element() el!: HTMLStencilElement;
|
||||
@Element() el!: HTMLIonTabsElement;
|
||||
|
||||
@State() tabs: HTMLIonTabElement[] = [];
|
||||
@State() selectedTab?: HTMLIonTabElement;
|
||||
@ -44,14 +44,15 @@ export class Tabs implements NavOutlet {
|
||||
*/
|
||||
@Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{tab: string}>;
|
||||
|
||||
async componentWillLoad() {
|
||||
componentWillLoad() {
|
||||
if (!this.useRouter) {
|
||||
this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
|
||||
this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
|
||||
}
|
||||
this.tabs = Array.from(this.el.querySelectorAll('ion-tab'));
|
||||
await this.initSelect();
|
||||
this.ionNavWillLoad.emit();
|
||||
this.componentWillUpdate();
|
||||
this.initSelect().then(() => {
|
||||
this.ionNavWillLoad.emit();
|
||||
this.componentWillUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
@ -72,7 +73,7 @@ export class Tabs implements NavOutlet {
|
||||
const { href, tab } = ev.detail;
|
||||
const selectedTab = this.tabs.find(t => t.tab === tab);
|
||||
if (this.useRouter && href !== undefined) {
|
||||
const router = this.doc.querySelector('ion-router');
|
||||
const router = document.querySelector('ion-router');
|
||||
if (router) {
|
||||
router.push(href);
|
||||
}
|
||||
@ -189,7 +190,7 @@ export class Tabs implements NavOutlet {
|
||||
|
||||
private notifyRouter() {
|
||||
if (this.useRouter) {
|
||||
const router = this.doc.querySelector('ion-router');
|
||||
const router = document.querySelector('ion-router');
|
||||
if (router) {
|
||||
return router.navChanged('forward');
|
||||
}
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
--ion-safe-area-bottom: 40px;
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
</head>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
@ -8,10 +8,8 @@
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script src="../../../../../dist/ionic.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = { useRouter: true };
|
||||
</script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="selectTab()">
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
|
||||
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
|
||||
|
||||
const Example: React.SFC<{}> = () => (
|
||||
|
||||
export const TabsExample: React.FunctionComponent = () => (
|
||||
<IonTabs>
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="schedule">
|
||||
@ -30,6 +28,4 @@ const Example: React.SFC<{}> = () => (
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
);
|
||||
|
||||
export default Example;
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user