ionic-angular
Version:
A powerful framework for building mobile and progressive web apps with JavaScript and Angular
135 lines • 5.19 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { ChangeDetectionStrategy, Component, ElementRef, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { ToolbarBase } from './toolbar-base';
/**
* @name Toolbar
* @description
* A Toolbar is a generic bar that is positioned above or below content.
* Unlike a [Navbar](../Navbar/), a toolbar can be used as a subheader.
* When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
* the toolbars stay fixed in their respective location. When placed within
* `<ion-content>`, toolbars will scroll with the content.
*
*
* ### Buttons in a Toolbar
* Buttons placed in a toolbar should be placed inside of the `<ion-buttons>`
* element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
* It should not be placed inside of the `<ion-buttons>` element. Both the
* `<ion-buttons>` element and the `menuToggle` can be positioned inside of the
* toolbar using different properties. The below chart has a description of each
* property.
*
* | Property | Description |
* |-------------|-----------------------------------------------------------------------------------------------------------------------|
* | `start` | Positions element to the left of the content in `ios` mode, and directly to the right in `md` and `wp` mode. |
* | `end` | Positions element to the right of the content in `ios` mode, and to the far right in `md` and `wp` mode. |
* | `left` | Positions element to the left of all other elements. |
* | `right` | Positions element to the right of all other elements. |
*
*
* ### Header / Footer Box Shadow and Border
* In `md` mode, the `<ion-header>` will receive a box-shadow on the bottom, and the
* `<ion-footer>` will receive a box-shadow on the top. In `ios` mode, the `<ion-header>`
* will receive a border on the bottom, and the `<ion-footer>` will receive a border on the
* top. Both the `md` box-shadow and the `ios` border can be removed by adding the `no-border`
* attribute to the element.
*
* ```html
* <ion-header no-border>
* <ion-toolbar>
* <ion-title>Header</ion-title>
* </ion-toolbar>
* </ion-header>
*
* <ion-content>
* </ion-content>
*
* <ion-footer no-border>
* <ion-toolbar>
* <ion-title>Footer</ion-title>
* </ion-toolbar>
* </ion-footer>
* ```
*
* @usage
*
* ```html
*
* <ion-header no-border>
*
* <ion-toolbar>
* <ion-title>My Toolbar Title</ion-title>
* </ion-toolbar>
*
* <ion-toolbar>
* <ion-title>I'm a subheader</ion-title>
* </ion-toolbar>
*
* <ion-header>
*
*
* <ion-content>
*
* <ion-toolbar>
* <ion-title>Scrolls with the content</ion-title>
* </ion-toolbar>
*
* </ion-content>
*
*
* <ion-footer no-border>
*
* <ion-toolbar>
* <ion-title>I'm a footer</ion-title>
* </ion-toolbar>
*
* </ion-footer>
* ```
*
* @demo /docs/demos/src/toolbar/
* @see {@link ../Navbar/ Navbar API Docs}
*/
var Toolbar = (function (_super) {
__extends(Toolbar, _super);
function Toolbar(config, elementRef, renderer) {
var _this = _super.call(this, config, elementRef, renderer) || this;
_this._sbPadding = config.getBoolean('statusbarPadding');
return _this;
}
Toolbar.decorators = [
{ type: Component, args: [{
selector: 'ion-toolbar',
template: '<div class="toolbar-background" [ngClass]="\'toolbar-background-\' + _mode"></div>' +
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
'<ng-content select="ion-buttons[start]"></ng-content>' +
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
'<div class="toolbar-content" [ngClass]="\'toolbar-content-\' + _mode">' +
'<ng-content></ng-content>' +
'</div>',
host: {
'class': 'toolbar',
'[class.statusbar-padding]': '_sbPadding'
},
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/** @nocollapse */
Toolbar.ctorParameters = function () { return [
{ type: Config, },
{ type: ElementRef, },
{ type: Renderer, },
]; };
return Toolbar;
}(ToolbarBase));
export { Toolbar };
//# sourceMappingURL=toolbar.js.map