navbar.js 4.4KB

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