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