navbar.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. var __extends = (this && this.__extends) || (function () {
  2. var extendStatics = Object.setPrototypeOf ||
  3. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  4. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  5. return function (d, b) {
  6. extendStatics(d, b);
  7. function __() { this.constructor = d; }
  8. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  9. };
  10. })();
  11. import { Component, ElementRef, Input, Optional, Renderer } from '@angular/core';
  12. import { App } from '../app/app';
  13. import { Config } from '../../config/config';
  14. import { isTrueProperty } from '../../util/util';
  15. import { NavController } from '../../navigation/nav-controller';
  16. import { ToolbarBase } from './toolbar-base';
  17. import { ViewController } from '../../navigation/view-controller';
  18. /**
  19. * @name Navbar
  20. * @description
  21. * Navbar acts as the navigational toolbar, which also comes with a back
  22. * button. A navbar can contain a `ion-title`, any number of buttons,
  23. * a segment, or a searchbar. Navbars must be placed within an
  24. * `<ion-header>` in order for them to be placed above the content.
  25. * It's important to note that navbar's are part of the dynamic navigation
  26. * stack. If you need a static toolbar, use ion-toolbar.
  27. *
  28. * @usage
  29. * ```html
  30. * <ion-header>
  31. *
  32. * <ion-navbar>
  33. * <button ion-button icon-only menuToggle>
  34. * <ion-icon name="menu"></ion-icon>
  35. * </button>
  36. *
  37. * <ion-title>
  38. * Page Title
  39. * </ion-title>
  40. *
  41. * <ion-buttons end>
  42. * <button ion-button icon-only (click)="openModal()">
  43. * <ion-icon name="options"></ion-icon>
  44. * </button>
  45. * </ion-buttons>
  46. * </ion-navbar>
  47. *
  48. * </ion-header>
  49. * ```
  50. *
  51. * @demo /docs/demos/src/navbar/
  52. * @see {@link ../../toolbar/Toolbar/ Toolbar API Docs}
  53. */
  54. var Navbar = (function (_super) {
  55. __extends(Navbar, _super);
  56. function Navbar(_app, viewCtrl, navCtrl, config, elementRef, renderer) {
  57. var _this = _super.call(this, config, elementRef, renderer) || this;
  58. _this._app = _app;
  59. _this.navCtrl = navCtrl;
  60. /**
  61. * @hidden
  62. */
  63. _this._hidden = false;
  64. /**
  65. * @hidden
  66. */
  67. _this._hideBb = false;
  68. viewCtrl && viewCtrl._setNavbar(_this);
  69. _this._bbIcon = config.get('backButtonIcon');
  70. _this._sbPadding = config.getBoolean('statusbarPadding');
  71. _this._backText = config.get('backButtonText', 'Back');
  72. return _this;
  73. }
  74. Object.defineProperty(Navbar.prototype, "hideBackButton", {
  75. /**
  76. * @input {boolean} If true, the back button will be hidden.
  77. */
  78. get: function () {
  79. return this._hideBb;
  80. },
  81. set: function (val) {
  82. this._hideBb = isTrueProperty(val);
  83. },
  84. enumerable: true,
  85. configurable: true
  86. });
  87. Navbar.prototype.backButtonClick = function (ev) {
  88. ev.preventDefault();
  89. ev.stopPropagation();
  90. this.navCtrl && this.navCtrl.pop(null, null);
  91. };
  92. /**
  93. * Set the text of the Back Button in the Nav Bar. Defaults to "Back".
  94. */
  95. Navbar.prototype.setBackButtonText = function (text) {
  96. this._backText = text;
  97. };
  98. /**
  99. * @hidden
  100. */
  101. Navbar.prototype.didEnter = function () {
  102. try {
  103. this._app.setTitle(this.getTitleText());
  104. }
  105. catch (e) {
  106. console.error(e);
  107. }
  108. };
  109. /**
  110. * @hidden
  111. */
  112. Navbar.prototype.setHidden = function (isHidden) {
  113. // used to display none/block the navbar
  114. this._hidden = isHidden;
  115. };
  116. Navbar.decorators = [
  117. { type: Component, args: [{
  118. selector: 'ion-navbar',
  119. template: '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
  120. '<button (click)="backButtonClick($event)" ion-button="bar-button" class="back-button" [ngClass]="\'back-button-\' + _mode" [hidden]="_hideBb">' +
  121. '<ion-icon class="back-button-icon" [ngClass]="\'back-button-icon-\' + _mode" [name]="_bbIcon"></ion-icon>' +
  122. '<span class="back-button-text" [ngClass]="\'back-button-text-\' + _mode">{{_backText}}</span>' +
  123. '</button>' +
  124. '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
  125. '<ng-content select="ion-buttons[start]"></ng-content>' +
  126. '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
  127. '<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
  128. '<ng-content></ng-content>' +
  129. '</div>',
  130. host: {
  131. '[hidden]': '_hidden',
  132. 'class': 'toolbar',
  133. '[class.statusbar-padding]': '_sbPadding'
  134. }
  135. },] },
  136. ];
  137. /** @nocollapse */
  138. Navbar.ctorParameters = function () { return [
  139. { type: App, },
  140. { type: ViewController, decorators: [{ type: Optional },] },
  141. { type: NavController, decorators: [{ type: Optional },] },
  142. { type: Config, },
  143. { type: ElementRef, },
  144. { type: Renderer, },
  145. ]; };
  146. Navbar.propDecorators = {
  147. 'hideBackButton': [{ type: Input },],
  148. };
  149. return Navbar;
  150. }(ToolbarBase));
  151. export { Navbar };
  152. //# sourceMappingURL=navbar.js.map