import { ElementRef, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { Ion } from '../ion';
import { ToolbarTitle } from './toolbar-title';
import { ViewController } from '../../navigation/view-controller';
/**
* @name Header
* @description
* Header is a parent component that holds the navbar and toolbar component.
* It's important to note that `ion-header` needs to be the one of the three root elements of a page
*
* @usage
*
* ```html
*
*
* Page1
*
*
*
* Subheader
*
*
*
*
* ```
*
*/
export declare class Header extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, viewCtrl: ViewController);
}
/**
* @name Footer
* @description
* Footer is a root component of a page that sits at the bottom of the page.
* Footer can be a wrapper for `ion-toolbar` to make sure the content area is sized correctly.
*
* @usage
*
* ```html
*
*
*
*
* Footer
*
*
* ```
*
*/
export declare class Footer extends Ion {
constructor(config: Config, elementRef: ElementRef, renderer: Renderer, viewCtrl: ViewController);
}
/**
* @private
*/
export declare class ToolbarBase extends Ion {
private _title;
constructor(config: Config, elementRef: ElementRef, renderer: Renderer);
/**
* @private
*/
_setTitle(titleCmp: ToolbarTitle): void;
/**
* @private
* Returns the toolbar title text if it exists or an empty string
*/
getTitleText(): any;
}
/**
* @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 `` or ``,
* the toolbars stay fixed in their respective location. When placed within
* ``, toolbars will scroll with the content.
*
*
* ### Buttons in a Toolbar
* Buttons placed in a toolbar should be placed inside of the ``
* element. An exception to this is a [menuToggle](../../menu/MenuToggle) button.
* It should not be placed inside of the `` element. Both the
* `` 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 `` will receive a box-shadow on the bottom, and the
* `` will receive a box-shadow on the top. In `ios` mode, the ``
* will receive a border on the bottom, and the `` 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
*
*
* Header
*
*
*
*
*
*
*
*
* Footer
*
*
* ```
*
* @usage
*
* ```html
*
*
*
*
* My Toolbar Title
*
*
*
* I'm a subheader
*
*
*
*
*
*
*
*
* Scrolls with the content
*
*
*
*
*
*
*
*
* I'm a footer
*
*
*
* ```
*
* @demo /docs/v2/demos/src/toolbar/
* @see {@link ../../navbar/Navbar/ Navbar API Docs}
*/
export declare class Toolbar extends ToolbarBase {
/** @private */
_sbPadding: boolean;
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
*/
color: string;
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
*/
mode: string;
constructor(viewCtrl: ViewController, config: Config, elementRef: ElementRef, renderer: Renderer);
}