mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
5d562166fc
* refactor(style): redundant measure units
* refactor(): change pointless boolean operation to cast
* refactor(): change redundant 'if' statement
* refactor(style): remove overwritten property value
* fix(spellcheck): wrong attribute value
* refactor(datetime-test): There should be a space between attribute and previous attribute
* refactor(import): import can be shortened
* refactor(semicolon): add missing semicolon
* docs(): fix incorrect parameter name
* refactor(): remove trailing unused parameters
* fix(menu): create mock change signature
* refactor(): remove redundant imports
all tests are passing
* refactor(style): 'var' used instead of 'let' or 'const'
* Revert "refactor(style): 'var' used instead of 'let' or 'const'"
This reverts commit 0369dbcaa8.
* refacrot(): remove unused code
* Revert "refactor(style): remove overwritten property value"
* revert(hammer): don't modify 3rd party files
* revert(activator): follow interface
* revert(activator): follow interface (cont)
* revert(activator): follow interface (cont)
* merge(master): fix conflicts
* revert(): change pointless boolean operation to cast
* revert(): text align is covered by a different PR
* revert(): add back unused parameters
* revert(): add back unused parameters
125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
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/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/ Navbar API Docs}
|
|
*/
|
|
@Component({
|
|
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,
|
|
})
|
|
export class Toolbar extends ToolbarBase {
|
|
/** @hidden */
|
|
_sbPadding: boolean;
|
|
|
|
constructor(
|
|
config: Config,
|
|
elementRef: ElementRef,
|
|
renderer: Renderer
|
|
) {
|
|
super(config, elementRef, renderer);
|
|
this._sbPadding = config.getBoolean('statusbarPadding');
|
|
}
|
|
|
|
}
|