123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121 |
- 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}
- */
- export class Toolbar extends ToolbarBase {
- constructor(config, elementRef, renderer) {
- super(config, elementRef, renderer);
- this._sbPadding = config.getBoolean('statusbarPadding');
- }
- }
- 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 = () => [
- { type: Config, },
- { type: ElementRef, },
- { type: Renderer, },
- ];
- //# sourceMappingURL=toolbar.js.map
|