标签:
/* ---示例代码----*/ <ion-content> <ion-list no-lines> <ion-item>no-lines</ion-item> <ion-item>no-lines</ion-item> <ion-item>no-lines</ion-item> </ion-list> <ion-list> <ion-item>default</ion-item> <ion-item>default</ion-item> <ion-item>default</ion-item> </ion-list> <ion-list inset> <ion-item>inset</ion-item> <ion-item>inset</ion-item> <ion-item>inset</ion-item> </ion-list> </ion-content> /* ---示例代码----*/
2、电话簿样式
当要把 列表进行分组的时候 请使用 <
ion-item-group
>
而不是
使用<
ion-list
> 。
来划分多个部分。 他如同一个电话簿。
<
ion-item-group
>
/* ---示例代码----*/ <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-divider light>B</ion-item-divider> <ion-item>Beijing</ion-item> </ion-item-group> </ion-content> /* ---示例代码----*/
每一个列表都可以带有一个 列表的头部用来显示信息。他就是 <
ion-list-header
>
/* ---示例代码----*/ <ion-content> <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> </ion-content> /* ---示例代码----*/
图标的位置 可以用 item-left 和 item-right 进行控制。
/* ---示例代码----*/ <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> /* ---示例代码----*/
<
ion-thumbnail
>
组件。使用该项目的 item-left、item-right 属性设置缩略图的位置:/* ---示例代码----*/ <ion-list> <ion-item> <ion-thumbnail item-left> <img src="img/1.jpg"> </ion-thumbnail> <h2>My Neighbor Totoro</h2> <p>Hayao Miyazaki • 1988</p> <button clear item-right>View</button> </ion-item> </ion-list> /* ---示例代码----*/
ion-avatar 比图标大 。比缩略图小 所以适合做头像 。当多个标题或段落标记被添加到<ion-item>时,该 item 将自动调整其高度以适应新的行。
/* ---示例代码----*/ <ion-list> <ion-item> <ion-avatar item-left> <img src="img/1.jpg"> </ion-avatar> <h2>Cher</h2> <p>Ugh. As if.</p> </ion-item> </ion-list> /* ---示例代码----*/
7、滑动项目 ion-item-sliding
/* ---示例代码----*/ <ion-list> <ion-item-sliding> <ion-item> <ion-avatar item-left> <img src="img/1.jpg"> </ion-avatar> <h2>Slimer</h2> </ion-item> <ion-item-options> <button primary> <ion-icon name="text"></ion-icon> Text </button> <button secondary> <ion-icon name="call"></ion-icon> Call </button> </ion-item-options> </ion-item-sliding> </ion-list> /* ---示例代码----*/
标签:
原文地址:http://www.cnblogs.com/dandingjun/p/5562527.html