mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 22:17:40 +08:00
chore(tabs): move tab, tabbar, tab-button to separate directories
This commit is contained in:
Adam Bradley
8
packages/core/src/components.d.ts
vendored
8
packages/core/src/components.d.ts
vendored
@ -2926,7 +2926,7 @@ declare global {
|
||||
|
||||
import {
|
||||
TabbarButton as IonTabButton
|
||||
} from './components/tabs/tab-button';
|
||||
} from './components/tab-button/tab-button';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonTabButtonElement extends IonTabButton, HTMLElement {
|
||||
@ -2958,7 +2958,7 @@ declare global {
|
||||
|
||||
import {
|
||||
TabHighlight as IonTabHighlight
|
||||
} from './components/tabs/tab-highlight';
|
||||
} from './components/tab-highlight/tab-highlight';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonTabHighlightElement extends IonTabHighlight, HTMLElement {
|
||||
@ -2989,7 +2989,7 @@ declare global {
|
||||
|
||||
import {
|
||||
Tab as IonTab
|
||||
} from './components/tabs/tab';
|
||||
} from './components/tab/tab';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonTabElement extends IonTab, HTMLElement {
|
||||
@ -3029,7 +3029,7 @@ declare global {
|
||||
|
||||
import {
|
||||
Tabbar as IonTabbar
|
||||
} from './components/tabs/tabbar';
|
||||
} from './components/tabbar/tabbar';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonTabbarElement extends IonTabbar, HTMLElement {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
|
||||
import { Swiper } from './vendor/swiper';
|
||||
import { Swiper } from './vendor/swiper.js';
|
||||
|
||||
|
||||
@Component({
|
||||
|
||||
40
packages/core/src/components/tab-button/readme.md
Normal file
40
packages/core/src/components/tab-button/readme.md
Normal file
@ -0,0 +1,40 @@
|
||||
# ion-tab-button
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionTabbarClick
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,11 +1,12 @@
|
||||
import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-button'
|
||||
})
|
||||
export class TabbarButton {
|
||||
|
||||
@Prop() selected: boolean = false;
|
||||
@Prop() selected = false;
|
||||
@Prop() tab: HTMLIonTabElement;
|
||||
|
||||
@Event() ionTabbarClick: EventEmitter;
|
||||
25
packages/core/src/components/tab-highlight/readme.md
Normal file
25
packages/core/src/components/tab-highlight/readme.md
Normal file
@ -0,0 +1,25 @@
|
||||
# ion-tab-highlight
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### selectedTab
|
||||
|
||||
any
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### selectedTab
|
||||
|
||||
any
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,6 +1,7 @@
|
||||
import { Component, Element, Listen, Prop, PropDidChange, State } from '@stencil/core';
|
||||
import { getParentElement } from '../../utils/helpers';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab-highlight'
|
||||
})
|
||||
177
packages/core/src/components/tab/readme.md
Normal file
177
packages/core/src/components/tab/readme.md
Normal file
@ -0,0 +1,177 @@
|
||||
# ion-tab
|
||||
|
||||
The Tab component, written `<ion-tab>`, is styled based on the mode and should
|
||||
be used in conjunction with the [Tabs](../Tabs/) component.
|
||||
|
||||
Each `ion-tab` is a declarative component for a [NavController](../../../navigation/NavController/).
|
||||
Basically, each tab is a `NavController`. For more information on using
|
||||
navigation controllers take a look at the [NavController API Docs](../../../navigation/NavController/).
|
||||
|
||||
See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
|
||||
|
||||
To add a basic tab, you can use the following markup where the `root` property
|
||||
is the page you want to load for that tab, `tabTitle` is the optional text to
|
||||
display on the tab, and `tabIcon` is the optional [icon](../../icon/Icon/).
|
||||
|
||||
```html
|
||||
<ion-tabs>
|
||||
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
|
||||
</ion-tabs>
|
||||
```
|
||||
|
||||
|
||||
Sometimes you may want to call a method instead of navigating to a new
|
||||
page. You can use the `(ionSelect)` event to call a method on your class when
|
||||
the tab is selected. Below is an example of presenting a modal from one of
|
||||
the tabs.
|
||||
|
||||
```html
|
||||
<ion-tabs>
|
||||
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
|
||||
</ion-tabs>pop
|
||||
```
|
||||
|
||||
```ts
|
||||
export class Tabs {
|
||||
constructor(public modalCtrl: ModalController) {
|
||||
|
||||
}
|
||||
|
||||
chat() {
|
||||
let modal = this.modalCtrl.create(ChatPage);
|
||||
modal.present();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### badge
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### badgeStyle
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### btnId
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### enabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### icon
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### path
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### show
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tabsHideOnSubPages
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### title
|
||||
|
||||
string
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### badge
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### badgeStyle
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### btnId
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### enabled
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### icon
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### path
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### selected
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### show
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tabsHideOnSubPages
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### title
|
||||
|
||||
string
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionSelect
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### _setActive()
|
||||
|
||||
|
||||
#### getActive()
|
||||
|
||||
|
||||
#### getNav()
|
||||
|
||||
|
||||
#### goToRoot()
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,112 +1,7 @@
|
||||
import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange, State } from '@stencil/core';
|
||||
import { PublicViewController, StencilElement } from '../../index';
|
||||
|
||||
/**
|
||||
* @name Tab
|
||||
* @description
|
||||
* The Tab component, written `<ion-tab>`, is styled based on the mode and should
|
||||
* be used in conjunction with the [Tabs](../Tabs/) component.
|
||||
*
|
||||
* Each `ion-tab` is a declarative component for a [NavController](../../../navigation/NavController/).
|
||||
* Basically, each tab is a `NavController`. For more information on using
|
||||
* navigation controllers take a look at the [NavController API Docs](../../../navigation/NavController/).
|
||||
*
|
||||
* See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* To add a basic tab, you can use the following markup where the `root` property
|
||||
* is the page you want to load for that tab, `tabTitle` is the optional text to
|
||||
* display on the tab, and `tabIcon` is the optional [icon](../../icon/Icon/).
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* Then, in your class you can set `chatRoot` to an imported class:
|
||||
*
|
||||
* ```ts
|
||||
* import { ChatPage } from '../chat/chat';
|
||||
*
|
||||
* export class Tabs {
|
||||
* // here we'll set the property of chatRoot to
|
||||
* // the imported class of ChatPage
|
||||
* chatRoot = ChatPage;
|
||||
*
|
||||
* constructor() {
|
||||
*
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* You can also pass some parameters to the root page of the tab through
|
||||
* `rootParams`. Below we pass `chatParams` to the Chat tab:
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* export class Tabs {
|
||||
* chatRoot = ChatPage;
|
||||
*
|
||||
* // set some user information on chatParams
|
||||
* chatParams = {
|
||||
* user1: 'admin',
|
||||
* user2: 'ionic'
|
||||
* };
|
||||
*
|
||||
* constructor() {
|
||||
*
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* And in `ChatPage` you can get the data from `NavParams`:
|
||||
*
|
||||
* ```ts
|
||||
* export class ChatPage {
|
||||
* constructor(navParams: NavParams) {
|
||||
* console.log('Passed params', navParams.data);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* Sometimes you may want to call a method instead of navigating to a new
|
||||
* page. You can use the `(ionSelect)` event to call a method on your class when
|
||||
* the tab is selected. Below is an example of presenting a modal from one of
|
||||
* the tabs.
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
|
||||
* </ion-tabs>pop
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* export class Tabs {
|
||||
* constructor(public modalCtrl: ModalController) {
|
||||
*
|
||||
* }
|
||||
*
|
||||
* chat() {
|
||||
* let modal = this.modalCtrl.create(ChatPage);
|
||||
* modal.present();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* @demo /docs/demos/src/tabs/
|
||||
* @see {@link /docs/components#tabs Tabs Component Docs}
|
||||
* @see {@link ../../tabs/Tabs Tabs API Docs}
|
||||
* @see {@link ../../nav/Nav Nav API Docs}
|
||||
* @see {@link ../../nav/NavController NavController API Docs}
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tab',
|
||||
})
|
||||
75
packages/core/src/components/tabbar/readme.md
Normal file
75
packages/core/src/components/tabbar/readme.md
Normal file
@ -0,0 +1,75 @@
|
||||
# ion-tabbar
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### highlight
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### layout
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### placement
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### selectedTab
|
||||
|
||||
any
|
||||
|
||||
|
||||
#### tabs
|
||||
|
||||
any
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### highlight
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### layout
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### placement
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### selectedTab
|
||||
|
||||
any
|
||||
|
||||
|
||||
#### tabs
|
||||
|
||||
any
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, Listen, Prop, State } from '@stencil/core';
|
||||
|
||||
import { createThemedClasses } from '../../utils/theme';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tabbar',
|
||||
host: {
|
||||
@ -1,4 +1,87 @@
|
||||
# page-tab
|
||||
# ion-tabs
|
||||
|
||||
Tabs make it easy to navigate between different pages or functional
|
||||
aspects of an app. The Tabs component, written as `<ion-tabs>`, is
|
||||
a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
|
||||
is a declarative component for a [NavController](../../../navigation/NavController/)
|
||||
|
||||
For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
|
||||
take a look at the [NavController API Docs](../../../navigation/NavController/).
|
||||
|
||||
|
||||
### Placement
|
||||
|
||||
The position of the tabs relative to the content varies based on
|
||||
the mode. The tabs are placed at the bottom of the screen
|
||||
for iOS and Android, and at the top for Windows by default. The position can
|
||||
be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
|
||||
or in an app's [config](../../config/Config/).
|
||||
See the [Input Properties](#input-properties) below for the available
|
||||
values of `tabsPlacement`.
|
||||
|
||||
|
||||
### Layout
|
||||
|
||||
The layout for all of the tabs can be defined using the `tabsLayout`
|
||||
property. If the individual tab has a title and icon, the icons will
|
||||
show on top of the title by default. All tabs can be changed by setting
|
||||
the value of `tabsLayout` on the `<ion-tabs>` element, or in your
|
||||
app's [config](../../config/Config/). For example, this is useful if
|
||||
you want to show tabs with a title only on Android, but show icons
|
||||
and a title for iOS. See the [Input Properties](#input-properties)
|
||||
below for the available values of `tabsLayout`.
|
||||
|
||||
|
||||
### Selecting a Tab
|
||||
|
||||
There are different ways you can select a specific tab from the tabs
|
||||
component. You can use the `selectedIndex` property to set the index
|
||||
on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
|
||||
instance after creation. See [usage](#usage) below for more information.
|
||||
|
||||
|
||||
You can add a basic tabs template to a `@Component` using the following
|
||||
template:
|
||||
|
||||
```html
|
||||
<ion-tabs>
|
||||
<ion-tab [root]="tab1Root"></ion-tab>
|
||||
<ion-tab [root]="tab2Root"></ion-tab>
|
||||
<ion-tab [root]="tab3Root"></ion-tab>
|
||||
</ion-tabs>
|
||||
```
|
||||
|
||||
Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
|
||||
|
||||
|
||||
By default, the first tab will be selected upon navigation to the
|
||||
Tabs page. We can change the selected tab by using `selectedIndex`
|
||||
on the `<ion-tabs>` element:
|
||||
|
||||
```html
|
||||
<ion-tabs selectedIndex="2">
|
||||
<ion-tab [root]="tab1Root"></ion-tab>
|
||||
<ion-tab [root]="tab2Root"></ion-tab>
|
||||
<ion-tab [root]="tab3Root"></ion-tab>
|
||||
</ion-tabs>
|
||||
```
|
||||
|
||||
```html
|
||||
<ion-tabs #myTabs>
|
||||
<ion-tab [root]="tab1Root"></ion-tab>
|
||||
<ion-tab [root]="tab2Root"></ion-tab>
|
||||
<ion-tab [root]="tab3Root"></ion-tab>
|
||||
</ion-tabs>
|
||||
```
|
||||
|
||||
Then in your class you can grab the `Tabs` instance and call `select()`,
|
||||
passing the index of the tab as the argument. Here we're grabbing the tabs
|
||||
by using ViewChild.
|
||||
|
||||
You can also switch tabs from a child component by calling `select()` on the
|
||||
parent view using the `NavController` instance. For example, assuming you have
|
||||
a `TabsPage` component, you could call the following from any of the child
|
||||
components to switch to `TabsRoot3`:
|
||||
|
||||
|
||||
|
||||
@ -7,31 +90,100 @@
|
||||
|
||||
## Properties
|
||||
|
||||
#### selected
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### tabbarHidden
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
#### tabbarHighlight
|
||||
|
||||
any
|
||||
boolean
|
||||
|
||||
|
||||
#### tabbarLayout
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### tabbarPlacement
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### selected
|
||||
#### name
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### tabbarHidden
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
#### tab
|
||||
#### tabbarHighlight
|
||||
|
||||
any
|
||||
boolean
|
||||
|
||||
|
||||
#### tabbarLayout
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### tabbarPlacement
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### translucent
|
||||
|
||||
boolean
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionTabbarClick
|
||||
#### ionChange
|
||||
|
||||
|
||||
#### ionNavChanged
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### getByIndex()
|
||||
|
||||
|
||||
#### getIndex()
|
||||
|
||||
|
||||
#### getRoutes()
|
||||
|
||||
|
||||
#### getSelected()
|
||||
|
||||
|
||||
#### getState()
|
||||
|
||||
|
||||
#### getTabs()
|
||||
|
||||
|
||||
#### select()
|
||||
|
||||
|
||||
#### setRouteId()
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,140 +2,8 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State }
|
||||
import { Config, NavState, RouterEntries } from '../../index';
|
||||
|
||||
export interface NavOptions { }
|
||||
// import { isPresent } from '../../utils/helpers';
|
||||
|
||||
/**
|
||||
* @name Tabs
|
||||
* @description
|
||||
* Tabs make it easy to navigate between different pages or functional
|
||||
* aspects of an app. The Tabs component, written as `<ion-tabs>`, is
|
||||
* a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
|
||||
* is a declarative component for a [NavController](../../../navigation/NavController/)
|
||||
*
|
||||
* For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
|
||||
* take a look at the [NavController API Docs](../../../navigation/NavController/).
|
||||
*
|
||||
* ### Placement
|
||||
*
|
||||
* The position of the tabs relative to the content varies based on
|
||||
* the mode. The tabs are placed at the bottom of the screen
|
||||
* for iOS and Android, and at the top for Windows by default. The position can
|
||||
* be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
|
||||
* or in an app's [config](../../config/Config/).
|
||||
* See the [Input Properties](#input-properties) below for the available
|
||||
* values of `tabsPlacement`.
|
||||
*
|
||||
* ### Layout
|
||||
*
|
||||
* The layout for all of the tabs can be defined using the `tabsLayout`
|
||||
* property. If the individual tab has a title and icon, the icons will
|
||||
* show on top of the title by default. All tabs can be changed by setting
|
||||
* the value of `tabsLayout` on the `<ion-tabs>` element, or in your
|
||||
* app's [config](../../config/Config/). For example, this is useful if
|
||||
* you want to show tabs with a title only on Android, but show icons
|
||||
* and a title for iOS. See the [Input Properties](#input-properties)
|
||||
* below for the available values of `tabsLayout`.
|
||||
*
|
||||
* ### Selecting a Tab
|
||||
*
|
||||
* There are different ways you can select a specific tab from the tabs
|
||||
* component. You can use the `selectedIndex` property to set the index
|
||||
* on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
|
||||
* instance after creation. See [usage](#usage) below for more information.
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* You can add a basic tabs template to a `@Component` using the following
|
||||
* template:
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs>
|
||||
* <ion-tab [root]="tab1Root"></ion-tab>
|
||||
* <ion-tab [root]="tab2Root"></ion-tab>
|
||||
* <ion-tab [root]="tab3Root"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
|
||||
*
|
||||
*```ts
|
||||
* @Component({
|
||||
* templateUrl: 'build/pages/tabs/tabs.html'
|
||||
* })
|
||||
* export class TabsPage {
|
||||
* // this tells the tabs component which Pages
|
||||
* // should be each tab's root Page
|
||||
* tab1Root = Page1;
|
||||
* tab2Root = Page2;
|
||||
* tab3Root = Page3;
|
||||
*
|
||||
* constructor() {
|
||||
*
|
||||
* }
|
||||
* }
|
||||
*```
|
||||
*
|
||||
* By default, the first tab will be selected upon navigation to the
|
||||
* Tabs page. We can change the selected tab by using `selectedIndex`
|
||||
* on the `<ion-tabs>` element:
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs selectedIndex="2">
|
||||
* <ion-tab [root]="tab1Root"></ion-tab>
|
||||
* <ion-tab [root]="tab2Root"></ion-tab>
|
||||
* <ion-tab [root]="tab3Root"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* Since the index starts at `0`, this will select the 3rd tab which has
|
||||
* root set to `tab3Root`. If you wanted to change it dynamically from
|
||||
* your class, you could use [property binding](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding).
|
||||
*
|
||||
* Alternatively, you can grab the `Tabs` instance and call the `select()`
|
||||
* method. This requires the `<ion-tabs>` element to have an `id`. For
|
||||
* example, set the value of `id` to `myTabs`:
|
||||
*
|
||||
* ```html
|
||||
* <ion-tabs #myTabs>
|
||||
* <ion-tab [root]="tab1Root"></ion-tab>
|
||||
* <ion-tab [root]="tab2Root"></ion-tab>
|
||||
* <ion-tab [root]="tab3Root"></ion-tab>
|
||||
* </ion-tabs>
|
||||
* ```
|
||||
*
|
||||
* Then in your class you can grab the `Tabs` instance and call `select()`,
|
||||
* passing the index of the tab as the argument. Here we're grabbing the tabs
|
||||
* by using ViewChild.
|
||||
*
|
||||
*```ts
|
||||
* export class TabsPage {
|
||||
*
|
||||
* @ViewChild('myTabs') tabRef: Tabs;
|
||||
*
|
||||
* componentDidEnter() {
|
||||
* this.tabRef.select(2);
|
||||
* }
|
||||
*
|
||||
* }
|
||||
*```
|
||||
*
|
||||
* You can also switch tabs from a child component by calling `select()` on the
|
||||
* parent view using the `NavController` instance. For example, assuming you have
|
||||
* a `TabsPage` component, you could call the following from any of the child
|
||||
* components to switch to `TabsRoot3`:
|
||||
*
|
||||
*```ts
|
||||
* switchTabs() {
|
||||
* this.navCtrl.parent.select(2);
|
||||
* }
|
||||
*```
|
||||
* @demo /docs/demos/src/tabs/
|
||||
*
|
||||
* @see {@link /docs/components#tabs Tabs Component Docs}
|
||||
* @see {@link ../Tab Tab API Docs}
|
||||
* @see {@link ../../config/Config Config API Docs}
|
||||
*
|
||||
*/
|
||||
|
||||
@Component({
|
||||
tag: 'ion-tabs',
|
||||
styleUrls: {
|
||||
|
||||
2
packages/core/src/index.d.ts
vendored
2
packages/core/src/index.d.ts
vendored
@ -134,7 +134,7 @@ export { Slides } from './components/slides/slides';
|
||||
export * from './components/spinner/spinner-configs';
|
||||
export { Spinner } from './components/spinner/spinner';
|
||||
export { SplitPane, SplitPaneAlert } from './components/split-pane/split-pane';
|
||||
export { Tab } from './components/tabs/tab';
|
||||
export { Tab } from './components/tab/tab';
|
||||
export { Tabs } from './components/tabs/tabs';
|
||||
export { Thumbnail } from './components/thumbnail/thumbnail';
|
||||
export { ToolbarTitle } from './components/title/title';
|
||||
|
||||
Reference in New Issue
Block a user