toolbar.js 4.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import { ChangeDetectionStrategy, Component, ElementRef, Renderer } from '@angular/core';
  2. import { Config } from '../../config/config';
  3. import { ToolbarBase } from './toolbar-base';
  4. /**
  5. * @name Toolbar
  6. * @description
  7. * A Toolbar is a generic bar that is positioned above or below content.
  8. * Unlike a [Navbar](../Navbar/), a toolbar can be used as a subheader.
  9. * When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
  10. * the toolbars stay fixed in their respective location. When placed within
  11. * `<ion-content>`, toolbars will scroll with the content.
  12. *
  13. *
  14. * ### Buttons in a Toolbar
  15. * Buttons placed in a toolbar should be placed inside of the `<ion-buttons>`
  16. * element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
  17. * It should not be placed inside of the `<ion-buttons>` element. Both the
  18. * `<ion-buttons>` element and the `menuToggle` can be positioned inside of the
  19. * toolbar using different properties. The below chart has a description of each
  20. * property.
  21. *
  22. * | Property | Description |
  23. * |-------------|-----------------------------------------------------------------------------------------------------------------------|
  24. * | `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. |
  25. * | `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
  26. * | `left` | Positions element to the left of all other elements. |
  27. * | `right` | Positions element to the right of all other elements. |
  28. *
  29. *
  30. * ### Header / Footer Box Shadow and Border
  31. * In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the
  32. * `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>`
  33. * will receive a border on the bottom, and the `<ion-footer>` will receive a border on the
  34. * top. Both the `md` box-shadow and the `ios` border can be removed by adding the `no-border`
  35. * attribute to the element.
  36. *
  37. * ```html
  38. * <ion-header no-border>
  39. * <ion-toolbar>
  40. * <ion-title>Header</ion-title>
  41. * </ion-toolbar>
  42. * </ion-header>
  43. *
  44. * <ion-content>
  45. * </ion-content>
  46. *
  47. * <ion-footer no-border>
  48. * <ion-toolbar>
  49. * <ion-title>Footer</ion-title>
  50. * </ion-toolbar>
  51. * </ion-footer>
  52. * ```
  53. *
  54. * @usage
  55. *
  56. * ```html
  57. *
  58. * <ion-header no-border>
  59. *
  60. * <ion-toolbar>
  61. * <ion-title>My Toolbar Title</ion-title>
  62. * </ion-toolbar>
  63. *
  64. * <ion-toolbar>
  65. * <ion-title>I'm a subheader</ion-title>
  66. * </ion-toolbar>
  67. *
  68. * <ion-header>
  69. *
  70. *
  71. * <ion-content>
  72. *
  73. * <ion-toolbar>
  74. * <ion-title>Scrolls with the content</ion-title>
  75. * </ion-toolbar>
  76. *
  77. * </ion-content>
  78. *
  79. *
  80. * <ion-footer no-border>
  81. *
  82. * <ion-toolbar>
  83. * <ion-title>I'm a footer</ion-title>
  84. * </ion-toolbar>
  85. *
  86. * </ion-footer>
  87. * ```
  88. *
  89. * @demo /docs/demos/src/toolbar/
  90. * @see {@link ../Navbar/ Navbar API Docs}
  91. */
  92. export class Toolbar extends ToolbarBase {
  93. constructor(config, elementRef, renderer) {
  94. super(config, elementRef, renderer);
  95. this._sbPadding = config.getBoolean('statusbarPadding');
  96. }
  97. }
  98. Toolbar.decorators = [
  99. { type: Component, args: [{
  100. selector: 'ion-toolbar',
  101. template: '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
  102. '<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
  103. '<ng-content select="ion-buttons[start]"></ng-content>' +
  104. '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
  105. '<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
  106. '<ng-content></ng-content>' +
  107. '</div>',
  108. host: {
  109. 'class': 'toolbar',
  110. '[class.statusbar-padding]': '_sbPadding'
  111. },
  112. changeDetection: ChangeDetectionStrategy.OnPush,
  113. },] },
  114. ];
  115. /** @nocollapse */
  116. Toolbar.ctorParameters = () => [
  117. { type: Config, },
  118. { type: ElementRef, },
  119. { type: Renderer, },
  120. ];
  121. //# sourceMappingURL=toolbar.js.map