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';
|
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) {
|
||||||
|
@ -7,18 +7,6 @@ import {ListVirtualScroll} from './virtual';
|
|||||||
import * as util from 'ionic/util';
|
import * as util from 'ionic/util';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TODO
|
|
||||||
*/
|
|
||||||
@IonicDirective({
|
|
||||||
selector: 'ion-list',
|
|
||||||
properties: [
|
|
||||||
'items',
|
|
||||||
'virtual',
|
|
||||||
'content'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
export class List extends Ion {
|
|
||||||
/**
|
|
||||||
* @name ionList
|
* @name ionList
|
||||||
* @classdesc
|
* @classdesc
|
||||||
* The List is a widely used interface element in almost any mobile app, and can include
|
* 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
|
* 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.
|
* 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 {ElementRef} elementRef TODO
|
||||||
* @param {IonicConfig} config 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({
|
@Component({
|
||||||
selector: 'ion-tab',
|
selector: 'ion-tab',
|
||||||
|
@ -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,6 +50,9 @@ import {IonicComponent, IonicView} from '../../config/annotations';
|
|||||||
directives: [forwardRef(() => TabButton)]
|
directives: [forwardRef(() => TabButton)]
|
||||||
})
|
})
|
||||||
export class Tabs extends ViewController {
|
export class Tabs extends ViewController {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Optional() hostViewCtrl: ViewController,
|
@Optional() hostViewCtrl: ViewController,
|
||||||
@Optional() viewItem: ViewItem,
|
@Optional() viewItem: ViewItem,
|
||||||
|
Reference in New Issue
Block a user