toolbar.js 5.1KB

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