tabs.d.ts 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. import { AfterViewInit, ElementRef, EventEmitter, Renderer, ViewContainerRef } from '@angular/core';
  2. import { Subject } from 'rxjs/Subject';
  3. import 'rxjs/add/operator/takeUntil';
  4. import { App } from '../app/app';
  5. import { Config } from '../../config/config';
  6. import { DeepLinker } from '../../navigation/deep-linker';
  7. import { Ion } from '../ion';
  8. import { Keyboard } from '../../platform/keyboard';
  9. import { Tabs as ITabs } from '../../navigation/nav-interfaces';
  10. import { NavController } from '../../navigation/nav-controller';
  11. import { NavControllerBase } from '../../navigation/nav-controller-base';
  12. import { NavigationContainer } from '../../navigation/navigation-container';
  13. import { NavOptions } from '../../navigation/nav-util';
  14. import { RootNode } from '../split-pane/split-pane';
  15. import { Platform } from '../../platform/platform';
  16. import { Tab } from './tab';
  17. import { TabHighlight } from './tab-highlight';
  18. import { ViewController } from '../../navigation/view-controller';
  19. /**
  20. * @name Tabs
  21. * @description
  22. * Tabs make it easy to navigate between different pages or functional
  23. * aspects of an app. The Tabs component, written as `<ion-tabs>`, is
  24. * a container of individual [Tab](../Tab/) components. Each individual `ion-tab`
  25. * is a declarative component for a [NavController](../../../navigation/NavController/)
  26. *
  27. * For more information on using nav controllers like Tab or [Nav](../../nav/Nav/),
  28. * take a look at the [NavController API Docs](../../../navigation/NavController/).
  29. *
  30. * ### Placement
  31. *
  32. * The position of the tabs relative to the content varies based on
  33. * the mode. The tabs are placed at the bottom of the screen
  34. * for iOS and Android, and at the top for Windows by default. The position can
  35. * be configured using the `tabsPlacement` attribute on the `<ion-tabs>` component,
  36. * or in an app's [config](../../config/Config/).
  37. * See the [Input Properties](#input-properties) below for the available
  38. * values of `tabsPlacement`.
  39. *
  40. * ### Layout
  41. *
  42. * The layout for all of the tabs can be defined using the `tabsLayout`
  43. * property. If the individual tab has a title and icon, the icons will
  44. * show on top of the title by default. All tabs can be changed by setting
  45. * the value of `tabsLayout` on the `<ion-tabs>` element, or in your
  46. * app's [config](../../config/Config/). For example, this is useful if
  47. * you want to show tabs with a title only on Android, but show icons
  48. * and a title for iOS. See the [Input Properties](#input-properties)
  49. * below for the available values of `tabsLayout`.
  50. *
  51. * ### Selecting a Tab
  52. *
  53. * There are different ways you can select a specific tab from the tabs
  54. * component. You can use the `selectedIndex` property to set the index
  55. * on the `<ion-tabs>` element, or you can call `select()` from the `Tabs`
  56. * instance after creation. See [usage](#usage) below for more information.
  57. *
  58. * @usage
  59. *
  60. * You can add a basic tabs template to a `@Component` using the following
  61. * template:
  62. *
  63. * ```html
  64. * <ion-tabs>
  65. * <ion-tab [root]="tab1Root"></ion-tab>
  66. * <ion-tab [root]="tab2Root"></ion-tab>
  67. * <ion-tab [root]="tab3Root"></ion-tab>
  68. * </ion-tabs>
  69. * ```
  70. *
  71. * Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page:
  72. *
  73. *```ts
  74. * @Component({
  75. * templateUrl: 'build/pages/tabs/tabs.html'
  76. * })
  77. * export class TabsPage {
  78. * // this tells the tabs component which Pages
  79. * // should be each tab's root Page
  80. * tab1Root = Page1;
  81. * tab2Root = Page2;
  82. * tab3Root = Page3;
  83. *
  84. * constructor() {
  85. *
  86. * }
  87. * }
  88. *```
  89. *
  90. * By default, the first tab will be selected upon navigation to the
  91. * Tabs page. We can change the selected tab by using `selectedIndex`
  92. * on the `<ion-tabs>` element:
  93. *
  94. * ```html
  95. * <ion-tabs selectedIndex="2">
  96. * <ion-tab [root]="tab1Root"></ion-tab>
  97. * <ion-tab [root]="tab2Root"></ion-tab>
  98. * <ion-tab [root]="tab3Root"></ion-tab>
  99. * </ion-tabs>
  100. * ```
  101. *
  102. * Since the index starts at `0`, this will select the 3rd tab which has
  103. * root set to `tab3Root`. If you wanted to change it dynamically from
  104. * your class, you could use [property binding](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding).
  105. *
  106. * Alternatively, you can grab the `Tabs` instance and call the `select()`
  107. * method. This requires the `<ion-tabs>` element to have an `id`. For
  108. * example, set the value of `id` to `myTabs`:
  109. *
  110. * ```html
  111. * <ion-tabs #myTabs>
  112. * <ion-tab [root]="tab1Root"></ion-tab>
  113. * <ion-tab [root]="tab2Root"></ion-tab>
  114. * <ion-tab [root]="tab3Root"></ion-tab>
  115. * </ion-tabs>
  116. * ```
  117. *
  118. * Then in your class you can grab the `Tabs` instance and call `select()`,
  119. * passing the index of the tab as the argument. Here we're grabbing the tabs
  120. * by using ViewChild.
  121. *
  122. *```ts
  123. * export class TabsPage {
  124. *
  125. * @ViewChild('myTabs') tabRef: Tabs;
  126. *
  127. * ionViewDidEnter() {
  128. * this.tabRef.select(2);
  129. * }
  130. *
  131. * }
  132. *```
  133. *
  134. * You can also switch tabs from a child component by calling `select()` on the
  135. * parent view using the `NavController` instance. For example, assuming you have
  136. * a `TabsPage` component, you could call the following from any of the child
  137. * components to switch to `TabsRoot3`:
  138. *
  139. *```ts
  140. * switchTabs() {
  141. * this.navCtrl.parent.select(2);
  142. * }
  143. *```
  144. * @demo /docs/demos/src/tabs/
  145. *
  146. * @see {@link /docs/components#tabs Tabs Component Docs}
  147. * @see {@link ../Tab Tab API Docs}
  148. * @see {@link ../../config/Config Config API Docs}
  149. *
  150. */
  151. export declare class Tabs extends Ion implements AfterViewInit, RootNode, ITabs, NavigationContainer {
  152. viewCtrl: ViewController;
  153. private _app;
  154. private _plt;
  155. private _linker;
  156. /** @internal */
  157. _ids: number;
  158. /** @internal */
  159. _tabs: Tab[];
  160. /** @internal */
  161. _sbPadding: boolean;
  162. /** @internal */
  163. _top: number;
  164. /** @internal */
  165. _bottom: number;
  166. /** @internal */
  167. id: string;
  168. /** @internal */
  169. _selectHistory: string[];
  170. /** @internal */
  171. _onDestroy: Subject<void>;
  172. /**
  173. * @input {string} A unique name for the tabs
  174. */
  175. name: string;
  176. /**
  177. * @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
  178. */
  179. selectedIndex: number;
  180. /**
  181. * @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
  182. */
  183. tabsLayout: string;
  184. /**
  185. * @input {string} Set position of the tabbar: `top`, `bottom`.
  186. */
  187. tabsPlacement: string;
  188. /**
  189. * @input {boolean} If true, show the tab highlight bar under the selected tab.
  190. */
  191. tabsHighlight: boolean;
  192. /**
  193. * @output {any} Emitted when the tab changes.
  194. */
  195. ionChange: EventEmitter<Tab>;
  196. /**
  197. * @internal
  198. */
  199. _highlight: TabHighlight;
  200. /**
  201. * @internal
  202. */
  203. _tabbar: ElementRef;
  204. /**
  205. * @internal
  206. */
  207. portal: ViewContainerRef;
  208. /**
  209. * @hidden
  210. */
  211. parent: NavControllerBase;
  212. constructor(parent: NavController, viewCtrl: ViewController, _app: App, config: Config, elementRef: ElementRef, _plt: Platform, renderer: Renderer, _linker: DeepLinker, keyboard?: Keyboard);
  213. /**
  214. * @internal
  215. */
  216. setTabbarHidden(tabbarHidden: boolean): void;
  217. /**
  218. * @internal
  219. */
  220. ngOnDestroy(): void;
  221. /**
  222. * @internal
  223. */
  224. ngAfterViewInit(): void;
  225. /**
  226. * @internal
  227. */
  228. initTabs(): Promise<any>;
  229. /**
  230. * @internal
  231. */
  232. _setConfig(attrKey: string, fallback: any): void;
  233. /**
  234. * @hidden
  235. */
  236. add(tab: Tab): string;
  237. /**
  238. * @param {number|Tab} tabOrIndex Index, or the Tab instance, of the tab to select.
  239. */
  240. select(tabOrIndex: number | Tab, opts?: NavOptions, fromUrl?: boolean): Promise<any>;
  241. _fireChangeEvent(selectedTab: Tab): void;
  242. _tabSwitchEnd(selectedTab: Tab, selectedPage: ViewController, currentPage: ViewController): void;
  243. /**
  244. * Get the previously selected Tab which is currently not disabled or hidden.
  245. * @param {boolean} trimHistory If the selection history should be trimmed up to the previous tab selection or not.
  246. * @returns {Tab}
  247. */
  248. previousTab(trimHistory?: boolean): Tab;
  249. /**
  250. * @param {number} index Index of the tab you want to get
  251. * @returns {Tab} Returns the tab who's index matches the one passed
  252. */
  253. getByIndex(index: number): Tab;
  254. /**
  255. * @return {Tab} Returns the currently selected tab
  256. */
  257. getSelected(): Tab;
  258. /**
  259. * @internal
  260. */
  261. getActiveChildNavs(): Tab[];
  262. /**
  263. * @internal
  264. */
  265. getAllChildNavs(): any[];
  266. /**
  267. * @internal
  268. */
  269. getIndex(tab: Tab): number;
  270. /**
  271. * @internal
  272. */
  273. length(): number;
  274. /**
  275. * "Touch" the active tab, going back to the root view of the tab
  276. * or optionally letting the tab handle the event
  277. */
  278. private _updateCurrentTab(tab, fromUrl);
  279. /**
  280. * @internal
  281. * DOM WRITE
  282. */
  283. setTabbarPosition(top: number, bottom: number): void;
  284. /**
  285. * @internal
  286. */
  287. resize(): void;
  288. /**
  289. * @internal
  290. */
  291. initPane(): boolean;
  292. /**
  293. * @internal
  294. */
  295. paneChanged(isPane: boolean): void;
  296. goToRoot(opts: NavOptions): Promise<any>;
  297. getType(): string;
  298. getSecondaryIdentifier(): string;
  299. /**
  300. * @private
  301. */
  302. _getSelectedTabIndex(secondaryId?: string, fallbackIndex?: number): number;
  303. }