docs(header): update header markup

src/components/menu/menu-toggle.ts

@@ -33,7 +33,9 @@ import {MenuController} from './menu-controller';
  * the `<ion-buttons>` element:
  *
  * ```html
- * <ion-navbar *navbar>
+ * <ion-header>
+ *
+ *   <ion-navbar>
  *     <ion-buttons start>
  *       <button>
  *         <ion-icon name="contact"></ion-icon>
@@ -51,6 +53,8 @@ import {MenuController} from './menu-controller';
  *       </button>
  *     </ion-buttons>
  *   </ion-navbar>
+ *
+ * </ion-header>
  * ```
  *
  * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using

src/components/navbar/navbar.ts

@@ -62,12 +62,16 @@ class ToolbarBackground {
 /**
  * @name Navbar
  * @description
- * Navbar is a global level toolbar that gets updated every time a page gets
+ * Navbar acts as the navigational toolbar, which also comes with a back
- * loaded. You can pass the navbar an `ion-title`, any number of buttons, a segment, or a searchbar.
+ * button. A navbar can contain a `ion-title`, any number of buttons,
+ * a segment, or a searchbar. Navbars must be placed within an
+ * `<ion-header>` in order for them to be placed above the content.
  *
  * @usage
  * ```html
- * <ion-navbar *navbar>
+ * <ion-header>
+ *
+ *   <ion-navbar>
  *     <button menuToggle>
  *       <ion-icon name="menu"></ion-icon>
  *     </button>
@@ -82,6 +86,8 @@ class ToolbarBackground {
  *       </button>
  *     </ion-buttons>
  *   </ion-navbar>
+ *
+ * </ion-header>
  * ```
  *
  * @demo /docs/v2/demos/navbar/
@@ -221,9 +227,6 @@ export class Navbar extends ToolbarBase {
 
 /**
  * @private
- * Used to find and register headers in a view, and this directive's
- * content will be moved up to the common navbar location, and created
- * using the same context as the view's content area.
 */
 @Directive({
   selector: 'template[navbar]'

src/components/toolbar/toolbar-title.ts

@@ -14,9 +14,11 @@ import {Toolbar} from './toolbar';
  *
  * ```html
  * <ion-header>
+ *
  *   <ion-navbar>
- *     <ion-title>Tab 1</ion-title>
+ *     <ion-title>Settings</ion-title>
  *   </ion-navbar>
+ *
  * </ion-header>
  * ```
  *
@@ -24,14 +26,16 @@ import {Toolbar} from './toolbar';
  *
  * ```html
  * <ion-header>
+ *
  *   <ion-navbar>
- *     <ion-title>Tab 1</ion-title>
+ *     <ion-title>Main Heder</ion-title>
  *   </ion-navbar>
- * </ion-header>
  *
  *   <ion-toolbar>
  *     <ion-title>Subheader</ion-title>
  *   </ion-toolbar>
+ *
+ * </ion-header>
  * ```
  *
  * @demo /docs/v2/demos/title/

src/components/toolbar/toolbar.ts

@@ -108,8 +108,9 @@ export class ToolbarBase extends Ion {
  * @description
  * A Toolbar is a generic bar that is positioned above or below content.
  * Unlike a [Navbar](../../nav/Navbar), a toolbar can be used as a subheader.
- * Toolbars are positioned automatically at the `top`, but they can be
+ * When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
- * positioned at the bottom by setting `position="bottom"` on the component.
+ * they stay fixed in their respective location. When placed within
+ * `<ion-content>`, toolbars will scroll with the content.
  *
  *
  * ### Buttons in a Toolbar
@@ -132,6 +133,8 @@ export class ToolbarBase extends Ion {
  *
  * @usage
  * ```html
+ * <ion-header>
+ *
  *   <ion-toolbar>
  *     <ion-buttons start>
  *       <button>
@@ -148,9 +151,21 @@ export class ToolbarBase extends Ion {
  *     <ion-title>I'm a subheader</ion-title>
  *   </ion-toolbar>
  *
- * <ion-content></ion-content>
+ * <ion-header>
  *
- * <ion-toolbar position="bottom">
+ *
+ * <ion-content>
+ *
+ *   <ion-toolbar>
+ *     <ion-title>Scrolls with the content</ion-title>
+ *   </ion-toolbar>
+ *
+ * </ion-content>
+ *
+ *
+ * <ion-footer>
+ *
+ *   <ion-toolbar>
  *     <ion-title>I'm a subfooter</ion-title>
  *     <ion-buttons right>
  *       <button>
@@ -159,7 +174,7 @@ export class ToolbarBase extends Ion {
  *     </ion-buttons>
  *   </ion-toolbar>
  *
- * <ion-toolbar position="bottom">
+ *   <ion-toolbar>
  *     <ion-title>I'm a footer</ion-title>
  *     <ion-buttons end>
  *       <button>
@@ -170,10 +185,10 @@ export class ToolbarBase extends Ion {
  *       </button>
  *     </ion-buttons>
  *   </ion-toolbar>
+ *
+ * </ion-footer>
  *  ```
  *
- * @property {any} [position] - set position of the toolbar, `top` or `bottom`.
- * Default `top`.
  * @demo /docs/v2/demos/toolbar/
  * @see {@link ../../navbar/Navbar/ Navbar API Docs}
  */