mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
docs: add description and example to list and item
This commit is contained in:
@ -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) {
|
||||
|
@ -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
|
||||
*/
|
||||
|
@ -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',
|
||||
|
@ -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,
|
||||
|
Reference in New Issue
Block a user