From f89c7af0024a805d38e1ef9b50e35558c7877c0d Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 28 Nov 2017 20:20:20 -0600 Subject: [PATCH] chore(tabs): move tab, tabbar, tab-button to separate directories --- packages/core/src/components.d.ts | 8 +- .../core/src/components/slides/slides.tsx | 2 +- .../core/src/components/tab-button/readme.md | 40 ++++ .../{tabs => tab-button}/tab-button.tsx | 3 +- .../src/components/tab-highlight/readme.md | 25 +++ .../{tabs => tab-highlight}/tab-highlight.tsx | 1 + packages/core/src/components/tab/readme.md | 177 ++++++++++++++++++ .../core/src/components/{tabs => tab}/tab.tsx | 107 +---------- packages/core/src/components/tabbar/readme.md | 75 ++++++++ .../components/{tabs => tabbar}/tabbar.tsx | 2 +- packages/core/src/components/tabs/readme.md | 168 ++++++++++++++++- packages/core/src/components/tabs/tabs.tsx | 134 +------------ packages/core/src/index.d.ts | 2 +- 13 files changed, 489 insertions(+), 255 deletions(-) create mode 100644 packages/core/src/components/tab-button/readme.md rename packages/core/src/components/{tabs => tab-button}/tab-button.tsx (97%) create mode 100644 packages/core/src/components/tab-highlight/readme.md rename packages/core/src/components/{tabs => tab-highlight}/tab-highlight.tsx (99%) create mode 100644 packages/core/src/components/tab/readme.md rename packages/core/src/components/{tabs => tab}/tab.tsx (50%) create mode 100644 packages/core/src/components/tabbar/readme.md rename packages/core/src/components/{tabs => tabbar}/tabbar.tsx (100%) diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index e9eb213eec..830de6cdc7 100644 --- a/packages/core/src/components.d.ts +++ b/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 { diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx index 97fcfa87c1..7de16ecfdf 100644 --- a/packages/core/src/components/slides/slides.tsx +++ b/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({ diff --git a/packages/core/src/components/tab-button/readme.md b/packages/core/src/components/tab-button/readme.md new file mode 100644 index 0000000000..53a86e0031 --- /dev/null +++ b/packages/core/src/components/tab-button/readme.md @@ -0,0 +1,40 @@ +# ion-tab-button + + + + + + +## Properties + +#### selected + +boolean + + +#### tab + +any + + +## Attributes + +#### selected + +boolean + + +#### tab + +any + + +## Events + +#### ionTabbarClick + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/tabs/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx similarity index 97% rename from packages/core/src/components/tabs/tab-button.tsx rename to packages/core/src/components/tab-button/tab-button.tsx index bbf9513390..f2b1cdf6c2 100644 --- a/packages/core/src/components/tabs/tab-button.tsx +++ b/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; diff --git a/packages/core/src/components/tab-highlight/readme.md b/packages/core/src/components/tab-highlight/readme.md new file mode 100644 index 0000000000..5828817aea --- /dev/null +++ b/packages/core/src/components/tab-highlight/readme.md @@ -0,0 +1,25 @@ +# ion-tab-highlight + + + + + + +## Properties + +#### selectedTab + +any + + +## Attributes + +#### selectedTab + +any + + + +---------------------------------------------- + +*Built by [StencilJS](https://stenciljs.com/)* diff --git a/packages/core/src/components/tabs/tab-highlight.tsx b/packages/core/src/components/tab-highlight/tab-highlight.tsx similarity index 99% rename from packages/core/src/components/tabs/tab-highlight.tsx rename to packages/core/src/components/tab-highlight/tab-highlight.tsx index f54e851f94..becdf17f38 100644 --- a/packages/core/src/components/tabs/tab-highlight.tsx +++ b/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' }) diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md new file mode 100644 index 0000000000..3e7a1023c7 --- /dev/null +++ b/packages/core/src/components/tab/readme.md @@ -0,0 +1,177 @@ +# ion-tab + +The Tab component, written ``, 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 + + + +``` + + +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 + + +pop +``` + +```ts +export class Tabs { + constructor(public modalCtrl: ModalController) { + + } + + chat() { + let modal = this.modalCtrl.create(ChatPage); + modal.present(); + } +} +``` + + + + + +## 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/)* diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tab/tab.tsx similarity index 50% rename from packages/core/src/components/tabs/tab.tsx rename to packages/core/src/components/tab/tab.tsx index 93fb62760e..cf10bac286 100644 --- a/packages/core/src/components/tabs/tab.tsx +++ b/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 ``, 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 - * - * - * - * ``` - * - * 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 - * - * - * - * ``` - * - * ```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 - * - * - * 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', }) diff --git a/packages/core/src/components/tabbar/readme.md b/packages/core/src/components/tabbar/readme.md new file mode 100644 index 0000000000..0ed636e12e --- /dev/null +++ b/packages/core/src/components/tabbar/readme.md @@ -0,0 +1,75 @@ +# ion-tabbar + + + + + + +## 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/)* diff --git a/packages/core/src/components/tabs/tabbar.tsx b/packages/core/src/components/tabbar/tabbar.tsx similarity index 100% rename from packages/core/src/components/tabs/tabbar.tsx rename to packages/core/src/components/tabbar/tabbar.tsx index 9a8a62e602..7ce1667ba3 100644 --- a/packages/core/src/components/tabs/tabbar.tsx +++ b/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: { diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md index 40ebc21b3c..7090d4081d 100644 --- a/packages/core/src/components/tabs/readme.md +++ b/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 ``, 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 `` 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 `` 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 `` 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 + + + + + +``` + +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 `` element: + +```html + + + + + +``` + +```html + + + + + +``` + +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() diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index e7589a97b1..c9a5aa58f1 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/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 ``, 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 `` 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 `` 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 `` 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 - * - * - * - * - * - * ``` - * - * 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 `` element: - * - * ```html - * - * - * - * - * - * ``` - * - * 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 `` element to have an `id`. For - * example, set the value of `id` to `myTabs`: - * - * ```html - * - * - * - * - * - * ``` - * - * 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: { diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index 67263a9af3..3c320de30c 100644 --- a/packages/core/src/index.d.ts +++ b/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';