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';
/**
* 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({
selector: 'ion-item,[ion-item]',
@ -24,22 +39,7 @@ import {dom} from 'ionic/util';
})
export class Item {
/**
* @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>
* ```
* TODO
* @param {ElementRef} elementRef TODO
*/
constructor(elementRef: ElementRef) {

View File

@ -7,18 +7,6 @@ import {ListVirtualScroll} from './virtual';
import * as util from 'ionic/util';
/**
* TODO
*/
@IonicDirective({
selector: 'ion-list',
properties: [
'items',
'virtual',
'content'
]
})
export class List extends Ion {
/**
* @name ionList
* @classdesc
* The List is a widely used interface element in almost any mobile app, and can include
@ -30,6 +18,18 @@ export class List extends Ion {
* 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({
selector: 'ion-list',
properties: [
'items',
'virtual',
'content'
]
})
export class List extends Ion {
/**
* TODO
* @param {ElementRef} elementRef 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({
selector: 'ion-tab',

View File

@ -5,9 +5,28 @@ import {ViewItem} from '../view/view-item';
import {Icon} from '../icon/icon';
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({
selector: 'ion-tabs',
defaultProperties: {
@ -31,6 +50,9 @@ import {IonicComponent, IonicView} from '../../config/annotations';
directives: [forwardRef(() => TabButton)]
})
export class Tabs extends ViewController {
/**
* TODO
*/
constructor(
@Optional() hostViewCtrl: ViewController,
@Optional() viewItem: ViewItem,