docs: add description and example to list and item

This commit is contained in:
Drew Rygh
2015-09-04 11:02:57 -05:00
parent 417343593b
commit 0f06573f2b
4 changed files with 64 additions and 34 deletions

View File

@ -5,7 +5,22 @@ import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-b
import {dom} from 'ionic/util'; import {dom} from 'ionic/util';
/** /**
* TODO * @name ionItem
* @classdesc
* Creates a list-item that can easily be swiped,
* deleted, reordered, edited, and more.
*
* @example
* ```html
* <ion-list>
* <ion-item *ng-for="#item of items" (^click)="itemTapped($event, item)">
* {{item.title}}
* <div class="item-note" item-right>
* {{item.note}}
* </div>
* </ion-item>
* </ion-list>
* ```
*/ */
@Component({ @Component({
selector: 'ion-item,[ion-item]', selector: 'ion-item,[ion-item]',
@ -24,22 +39,7 @@ import {dom} from 'ionic/util';
}) })
export class Item { export class Item {
/** /**
* @name ionItem * TODO
* @classdesc
* Creates a list-item that can easily be swiped,
* deleted, reordered, edited, and more.
*
* @example
* ```html
* <ion-list>
* <ion-item *ng-for="#item of items" (^click)="itemTapped($event, item)">
* {{item.title}}
* <div class="item-note" item-right>
* {{item.note}}
* </div>
* </ion-item>
* </ion-list>
* ```
* @param {ElementRef} elementRef TODO * @param {ElementRef} elementRef TODO
*/ */
constructor(elementRef: ElementRef) { constructor(elementRef: ElementRef) {

View File

@ -7,7 +7,17 @@ import {ListVirtualScroll} from './virtual';
import * as util from 'ionic/util'; import * as util from 'ionic/util';
/** /**
* TODO * @name ionList
* @classdesc
* The List is a widely used interface element in almost any mobile app, and can include
* content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
*
* Both the list, which contains items, and the list items themselves can be any HTML
* element.
*
* Using the ionList and ionItem components make it easy to support various
* interaction modes such as swipe to edit, drag to reorder, and removing items.
*
*/ */
@IonicDirective({ @IonicDirective({
selector: 'ion-list', selector: 'ion-list',
@ -19,17 +29,7 @@ import * as util from 'ionic/util';
}) })
export class List extends Ion { export class List extends Ion {
/** /**
* @name ionList * TODO
* @classdesc
* The List is a widely used interface element in almost any mobile app, and can include
* content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
*
* Both the list, which contains items, and the list items themselves can be any HTML
* element.
*
* Using the ionList and ionItem components make it easy to support various
* interaction modes such as swipe to edit, drag to reorder, and removing items.
*
* @param {ElementRef} elementRef TODO * @param {ElementRef} elementRef TODO
* @param {IonicConfig} config TODO * @param {IonicConfig} config TODO
*/ */

View File

@ -6,7 +6,15 @@ import {Tabs} from './tabs';
/** /**
* TODO * @name ionTab
* @requires ionTabs
* @classdesc
* Contains a tab's content. The content only exists while the given tab is selected.
*
* @example
* ```html
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* ```
*/ */
@Component({ @Component({
selector: 'ion-tab', selector: 'ion-tab',

View File

@ -5,9 +5,28 @@ import {ViewItem} from '../view/view-item';
import {Icon} from '../icon/icon'; import {Icon} from '../icon/icon';
import {IonicComponent, IonicView} from '../../config/annotations'; import {IonicComponent, IonicView} from '../../config/annotations';
/** /**
* TODO * @name ionTabs
*/ * @classdesc
* Powers a multi-tabbed interface with a Tab Bar and a set of "pages" that can be tabbed through.
*
* Assign any tabs attribute to the element to define its look and feel.
*
* For iOS, tabs will appear at the bottom of the screen. For Android, tabs will be at the top of the screen, below the nav-bar. This follows each OS's design specification, but can be configured with the ionicConfig.
*
* See the ionTab component's documentation for more details on individual tabs.
*
* @example
* ```html
* <ion-tabs>
* <ion-tab tab-title="Heart" tab-icon="ion-ios-heart-outline" [root]="root1"></ion-tab>
* <ion-tab tab-title="Star" tab-icon="ion-ios-star-outline" [root]="root2"></ion-tab>
* <ion-tab tab-title="Stopwatch" tab-icon="ion-ios-stopwatch-outline" [root]="root3"></ion-tab>
* </ion-tabs>
* ```
*
*/
@IonicComponent({ @IonicComponent({
selector: 'ion-tabs', selector: 'ion-tabs',
defaultProperties: { defaultProperties: {
@ -31,7 +50,10 @@ import {IonicComponent, IonicView} from '../../config/annotations';
directives: [forwardRef(() => TabButton)] directives: [forwardRef(() => TabButton)]
}) })
export class Tabs extends ViewController { export class Tabs extends ViewController {
constructor( /**
* TODO
*/
constructor(
@Optional() hostViewCtrl: ViewController, @Optional() hostViewCtrl: ViewController,
@Optional() viewItem: ViewItem, @Optional() viewItem: ViewItem,
injector: Injector, injector: Injector,