chore(tabs): move tab, tabbar, tab-button to separate directories

packages/core/src/components.d.ts

@@ -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 {

packages/core/src/components/slides/slides.tsx

@@ -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({

packages/core/src/components/tab-button/readme.md

@@ -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/)*

packages/core/src/components/tab-button/tab-button.tsx

@@ -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;

packages/core/src/components/tab-highlight/readme.md

@@ -0,0 +1,25 @@
+# ion-tab-highlight
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+#### selectedTab
+
+any
+
+
+## Attributes
+
+#### selectedTab
+
+any
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*

packages/core/src/components/tab-highlight/tab-highlight.tsx

@@ -1,6 +1,7 @@
 import { Component, Element, Listen, Prop, PropDidChange, State } from '@stencil/core';
 import { getParentElement } from '../../utils/helpers';
 
+
 @Component({
   tag: 'ion-tab-highlight'
 })

packages/core/src/components/tab/readme.md

@@ -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/)*

packages/core/src/components/tab/tab.tsx

@@ -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',
 })

packages/core/src/components/tabbar/readme.md

@@ -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/)*

packages/core/src/components/tabbar/tabbar.tsx

@@ -1,7 +1,7 @@
 import { Component, Listen, Prop, State } from '@stencil/core';
-
 import { createThemedClasses } from '../../utils/theme';
 
+
 @Component({
   tag: 'ion-tabbar',
   host: {

packages/core/src/components/tabs/readme.md

@@ -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()
 
 
 

packages/core/src/components/tabs/tabs.tsx

@@ -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: {

packages/core/src/index.d.ts

@@ -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';