Lists

http://ionicframework.com/docs/v2/components/#lists

Lists用来显示信息列表，如联系人列表、播放列表或菜单。

更多内容请查看API文档。

基本用法

所有的列表默认都有分隔线：

<ion-list> 
    <ion-item *ngFor="let item of items" (click)="itemSelected(item)"> 
        {{item.title}} 
    </ion-item> 
</ion-list>

No Lines

添加no-lines属性将在列表项间隐藏分隔线：

<ion-list no-lines> 
    <ion-item *ngFor="let item of items" (click)="itemSelected(item)"> 
        {{item.title}} 
    </ion-item> 
</ion-list>

Inset List

Lists默认情况下没有外部的margin。为了添加margin可以给ion-list添加inset属性。

<ion-list inset> 
    <ion-item *ngFor="let item of items" (click)="itemSelected(item)"> 
        {{item.title}} 
    </ion-item> 
</ion-list>

List Dividers

为了分隔项，使用<ion-item-group>来代替<ion-list>，使用<ion-item-divider>来分隔不同的组：

<ion-content> 
    <ion-item-group> 
        <ion-item-divider light>A</ion-item-divider> 
        <ion-item>Angola</ion-item> 
        <ion-item>Argentina</ion-item> 
    </ion-item-group> 
</ion-content>

List Headers

每个列表都可以在顶部包含一个header：

<ion-list> 
    <ion-list-header> Action </ion-list-header> 
    <ion-item>Terminator II</ion-item> 
    <ion-item>The Empire Strikes Back</ion-item> 
    <ion-item>Blade Runner</ion-item> 
</ion-list>

Icon List

为列表项添加图标是对列表项的内容作出提示的好方式。图标的位置可以通过设置item-left和item-right属性来实现。默认的图标大小是small，也可以使用large属性来让它变大一些。

<ion-list> 
    <ion-item> 
        <ion-icon name="leaf" item-left></ion-icon>         
            Herbology 
        <ion-icon name="rose" item-right></ion-icon>     
    </ion-item> 
</ion-list>

Avatar List

Item Avatar是一个比图标大一些的图像，但是比缩略图要小些。通过在项内添加<ion-avatar>组件来使用。Avatar的位置通过item-left和item-right属性来设置：

<ion-list> 
    <ion-item> 
        <ion-avatar item-left> 
            <img src="img/avatar-cher.png"> 
        </ion-avatar> 
        <h2>Cher</h2> 
        <p>Ugh. As if.</p> 
    </ion-item> 
</ion-list>

Multi-line List

多行列表与普通列表是相同的，除了项可以包含多行文本。当一个<ion-item>组件包含header或段落等多种文本时，它将会自动扩展高度来适应新的文本行。下面是一个有三行文本的例子：

<ion-list> 
    <ion-item> 
        <ion-avatar item-left> 
            <img src="img/avatar-finn.png"> 
        </ion-avatar> 
        <h2>Finn</h2> 
        <h3>Don't Know What To Do!</h3> 
        <p>I've had a pretty messed up day. If we just...</p> 
    </ion-item> 
</ion-list>

Sliding List

Sliding Items可以向左或向右滑动来显示隐藏的按钮。在ion-list组件内添加ion-item-sliding组件来使用。然后在项内添加ion-item-options组件来包含按钮。

<ion-list> 
    <ion-item-sliding> 
        <ion-item> 
            <ion-avatar item-left> 
                <img src="img/slimer.png"> 
            </ion-avatar> 
            <h2>Slimer</h2> 
        </ion-item> 
        <ion-item-options side="left"> 
            <button ion-button color="primary"> 
                <ion-icon name="text"></ion-icon> 
                Text 
            </button> 
            <button ion-button color="secondary"> 
                <ion-icon name="call"></ion-icon> 
                Call 
            </button> 
        </ion-item-options> 
        <ion-item-options side="right"> 
            <button ion-button color="primary"> 
                <ion-icon name="mail"></ion-icon> 
                Email 
            </button> 
        </ion-item-options> 
    </ion-item-sliding> 
</ion-list>

Thumbnail List

Item Thumbnail显示了一个占据项高度的图片。在项内添加ion-thumbnail组件来使用。缩略图的位置通过item-left和item-right属性来设置：

<ion-list> 
    <ion-item> 
        <ion-thumbnail item-left> 
            <img src="img/thumbnail-totoro.png"> 
        </ion-thumbnail> 
        <h2>My Neighbor Totoro</h2> 
        <p>Hayao Miyazaki • 1988</p> 
        <button clear item-right>View</button> 
    </ion-item> 
</ion-list>