toolbar-title.js 2.7KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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 { ChangeDetectionStrategy, Component, ElementRef, Inject, Optional, Renderer, ViewEncapsulation, forwardRef, } from '@angular/core';
  12. import { Config } from '../../config/config';
  13. import { Ion } from '../ion';
  14. import { Navbar } from './navbar';
  15. import { Toolbar } from './toolbar';
  16. /**
  17. * @name Title
  18. * @description
  19. * `ion-title` is a component that sets the title of the `Toolbar` or `Navbar`
  20. *
  21. * @usage
  22. *
  23. * ```html
  24. * <ion-header>
  25. *
  26. * <ion-navbar>
  27. * <ion-title>Settings</ion-title>
  28. * </ion-navbar>
  29. *
  30. * </ion-header>
  31. * ```
  32. *
  33. * Or to create a navbar with a toolbar as a subheader:
  34. *
  35. * ```html
  36. * <ion-header>
  37. *
  38. * <ion-navbar>
  39. * <ion-title>Main Header</ion-title>
  40. * </ion-navbar>
  41. *
  42. * <ion-toolbar>
  43. * <ion-title>Subheader</ion-title>
  44. * </ion-toolbar>
  45. *
  46. * </ion-header>
  47. * ```
  48. *
  49. * @demo /docs/demos/src/title/
  50. */
  51. var ToolbarTitle = (function (_super) {
  52. __extends(ToolbarTitle, _super);
  53. function ToolbarTitle(config, elementRef, renderer, toolbar, navbar) {
  54. var _this = _super.call(this, config, elementRef, renderer, 'title') || this;
  55. toolbar && toolbar._setTitle(_this);
  56. navbar && navbar._setTitle(_this);
  57. return _this;
  58. }
  59. /**
  60. * @hidden
  61. */
  62. ToolbarTitle.prototype.getTitleText = function () {
  63. return this._elementRef.nativeElement.textContent;
  64. };
  65. ToolbarTitle.decorators = [
  66. { type: Component, args: [{
  67. selector: 'ion-title',
  68. template: '<div class="toolbar-title" [ngClass]="\'toolbar-title-\' + _mode">' +
  69. '<ng-content></ng-content>' +
  70. '</div>',
  71. changeDetection: ChangeDetectionStrategy.OnPush,
  72. encapsulation: ViewEncapsulation.None,
  73. },] },
  74. ];
  75. /** @nocollapse */
  76. ToolbarTitle.ctorParameters = function () { return [
  77. { type: Config, },
  78. { type: ElementRef, },
  79. { type: Renderer, },
  80. { type: Toolbar, decorators: [{ type: Optional },] },
  81. { type: Navbar, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(function () { return Navbar; }),] },] },
  82. ]; };
  83. return ToolbarTitle;
  84. }(Ion));
  85. export { ToolbarTitle };
  86. //# sourceMappingURL=toolbar-title.js.map