12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- import { 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 declare class Toolbar extends ToolbarBase {
- /** @hidden */
- _sbPadding: boolean;
- constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
- }
|