toolbar-title.js 2.0KB

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