ionic2 学习笔记（三）item list设置

item一项

 1 <ion-item>有短下边框线，没有 >箭头。
 2 
 3 指令:detail-push detail-none 确定有没有箭头。指令:no-lines没有线。指令：text-wrap文本。
 4 
 5 指令：item-start item-end 是按钮等的左右。指令:disabled 灰色不可用
 6 
 7 <button ion-item>当成指令，有短下边框线，有 >箭头。
 8 
 9 <ion-list><ion-item>Item</ion-item></ion-list>有长上下边框线，没有 >箭头。
10 
11 列表头应该写成<ion-list-header>。
12 
13 项目分隔符应写为<ion-item-divider>。
14 
15 <ion-avatar>头像
16 
17 <ion-thumbnail>具有右侧缩略图的项目
18 
19 <ion-item-sliding><ion-item-options>滑动选项-删除、添加

 

<ion-item>有短下边框线，没有 >箭头。

指令:detail-push detail-none 确定有没有箭头。指令:no-lines没有线。指令：text-wrap文本。

指令：item-start item-end 是按钮等的左右。指令:disabled 灰色不可用

<button ion-item>当成指令，有短下边框线，有 >箭头。

<ion-list><ion-item>Item</ion-item></ion-list>有长上下边框线，没有 >箭头。

<ion-list inset>上，右有空边距

列表头应该写成 <ion-list-header>。

项目分隔符应写为<ion-item-divider>。

<ion-avatar>头像

<ion-thumbnail>具有右侧缩略图的项目

<ion-item-sliding><ion-item-options>滑动选项-删除、添加

1 <ion-item>
2     <ion-avatar item-start>
3       <img src="assets/img/badu-live.png">
4     </ion-avatar>
5     Avatar Item
6     <button ion-button outline item-end>View</button>
7   </ion-item>
<ion-item>
    <h2>Item</h2>
    <p>Item Paragraph</p>
    <ion-thumbnail item-end>
      <img src="assets/img/badu-live.png">
    </ion-thumbnail>
  </ion-item>
<ion-item-sliding>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options>
      <button ion-button color="primary" (click)="archive()">Archive</button>
    </ion-item-options>
  </ion-item-sliding>
1 <ion-item>
2     <h2>Item</h2>
3     <p>Item Paragraph</p>
4     <ion-thumbnail item-end>
5       <img src="assets/img/badu-live.png">
6     </ion-thumbnail>
7   </ion-item>

 

posted on 2017-05-24 18:46  技术V类  阅读(568)  评论(0)    收藏  举报

导航