javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(header): update header markup

Browse Source
This commit is contained in:
Adam Bradley
2016-06-17 11:48:15 -05:00
parent 1a8f6d745d
commit 64b867816a
4 changed files with 107 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/menu/menu-toggle.ts
View File

@ -33,24 +33,28 @@ import {MenuController} from './menu-controller';
* the `<ion-buttons>` element:
*
* ```html
* <ion-navbar *navbar>
* <ion-buttons start>
* <button>
* <ion-icon name="contact"></ion-icon>
* <ion-header>
*
* <ion-navbar>
* <ion-buttons start>
* <button>
* <ion-icon name="contact"></ion-icon>
* </button>
* </ion-buttons>
* <button menuToggle>
* <ion-icon name="menu"></ion-icon>
* </button>
* </ion-buttons>
* <button menuToggle>
* <ion-icon name="menu"></ion-icon>
* </button>
* <ion-title>
* Title
* </ion-title>
* <ion-buttons end>
* <button (click)="doClick()">
* <ion-icon name="more"></ion-icon>
* </button>
* </ion-buttons>
* </ion-navbar>
* <ion-title>
* Title
* </ion-title>
* <ion-buttons end>
* <button (click)="doClick()">
* <ion-icon name="more"></ion-icon>
* </button>
* </ion-buttons>
* </ion-navbar>
*
* </ion-header>
* ```
*
* Similar to `<ion-buttons>`, the `menuToggle` can be positioned using

39
src/components/navbar/navbar.ts
View File

@ -62,26 +62,32 @@ class ToolbarBackground {
/**
* @name Navbar
* @description
* Navbar is a global level toolbar that gets updated every time a page gets
* loaded. You can pass the navbar an `ion-title`, any number of buttons, a segment, or a searchbar.
* Navbar acts as the navigational toolbar, which also comes with a back
* 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>
* <button menuToggle>
* <ion-icon name="menu"></ion-icon>
* </button>
* <ion-header>
*
* <ion-title>
* Page Title
* </ion-title>
*
* <ion-buttons end>
* <button (click)="openModal()">
* <ion-icon name="options"></ion-icon>
* <ion-navbar>
* <button menuToggle>
* <ion-icon name="menu"></ion-icon>
* </button>
* </ion-buttons>
* </ion-navbar>
*
* <ion-title>
* Page Title
* </ion-title>
*
* <ion-buttons end>
* <button (click)="openModal()">
* <ion-icon name="options"></ion-icon>
* </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]'

20
src/components/toolbar/toolbar-title.ts
View File

@ -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-navbar>
* </ion-header>
*
* <ion-toolbar>
* <ion-title>Subheader</ion-title>
* </ion-toolbar>
* <ion-navbar>
* <ion-title>Main Heder</ion-title>
* </ion-navbar>
*
* <ion-toolbar>
* <ion-title>Subheader</ion-title>
* </ion-toolbar>
*
* </ion-header>
* ```
*
* @demo /docs/v2/demos/title/

91
src/components/toolbar/toolbar.ts
View File

@ -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
* positioned at the bottom by setting `position="bottom"` on the component.
* When toolbars are placed within an `<ion-header>` or `<ion-footer>`,
* they stay fixed in their respective location. When placed within
* `<ion-content>`, toolbars will scroll with the content.
*
*
* ### Buttons in a Toolbar
@ -132,48 +133,62 @@ export class ToolbarBase extends Ion {
*
* @usage
* ```html
* <ion-toolbar>
* <ion-buttons start>
* <button>
* <ion-icon name="contact"></ion-icon>
* </button>
* <button>
* <ion-icon name="search"></ion-icon>
* </button>
* </ion-buttons>
* <ion-title>My Toolbar Title</ion-title>
* </ion-toolbar>
* <ion-header>
*
* <ion-toolbar>
* <ion-title>I'm a subheader</ion-title>
* </ion-toolbar>
* <ion-toolbar>
* <ion-buttons start>
* <button>
* <ion-icon name="contact"></ion-icon>
* </button>
* <button>
* <ion-icon name="search"></ion-icon>
* </button>
* </ion-buttons>
* <ion-title>My Toolbar Title</ion-title>
* </ion-toolbar>
*
* <ion-content></ion-content>
* <ion-toolbar>
* <ion-title>I'm a subheader</ion-title>
* </ion-toolbar>
*
* <ion-toolbar position="bottom">
* <ion-title>I'm a subfooter</ion-title>
* <ion-buttons right>
* <button>
* <ion-icon name="menu"></ion-icon>
* </button>
* </ion-buttons>
* </ion-toolbar>
* <ion-header>
*
* <ion-toolbar position="bottom">
* <ion-title>I'm a footer</ion-title>
* <ion-buttons end>
* <button>
* <ion-icon name="more"></ion-icon>
* </button>
* <button>
* <ion-icon name="options"></ion-icon>
* </button>
* </ion-buttons>
* </ion-toolbar>
*
* <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>
* <ion-icon name="menu"></ion-icon>
* </button>
* </ion-buttons>
* </ion-toolbar>
*
* <ion-toolbar>
* <ion-title>I'm a footer</ion-title>
* <ion-buttons end>
* <button>
* <ion-icon name="more"></ion-icon>
* </button>
* <button>
* <ion-icon name="options"></ion-icon>
* </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}
*/