ionic2 学习笔记（四） list设置

ion-icon：图标

ion-avatar:头像

ion-thumbnail：正方形图像

ion-list-header:表头 每个列表可以包括列表顶部的标题：       

ion-item-divider：要划分项目组，请使用<ion-item-group>而不是<ion-list>。使用<ion-item-divider>组件将组划分为多个部分

<ion-list><ion-item></ion-list>

划出选项 不以 ion-item-sliding为单位 选项 ion-item-options

 1 <ion-item-sliding>
 2       <ion-item>
 3         <ion-avatar item-start>
 4           <img src="assets/img/venkman.jpg">
 5         </ion-avatar>
 6         <h2>Venkman</h2>
 7         <p>Back off man, I'm a scientist.</p>
 8       </ion-item>
 9       <ion-item-options>
10         <button ion-button color="light" icon-left>
11           <ion-icon name="ios-more"></ion-icon>
12           More
13         </button>
14         <button ion-button color="primary" icon-left>
15           <ion-icon name="text"></ion-icon>
16           Text
17         </button>
18         <button ion-button color="secondary" icon-left>
19           <ion-icon name="call"></ion-icon>
20           Call
21         </button>
22       </ion-item-options>
23     </ion-item-sliding>

 

 1 <ion-list>
 2   <button ion-item>
 3     {{ item }}
 4   </button>  
 5 </ion-list>
 6 
 7 <ion-content>
 8   <ion-item-group>
 9     <ion-item-divider color="light">A</ion-item-divider>
10     <ion-item>Angola</ion-item>
11     <ion-item>Argentina</ion-item>
12   </ion-item-group>
13 </ion-content>
14 
15 <ion-list>
16   <ion-list-header>
17     Action
18   </ion-list-header>
19   <ion-item>Terminator II</ion-item>
20   <ion-item>The Empire Strikes Back</ion-item>
21   <ion-item>Blade Runner</ion-item>
22 </ion-list>
23 
24 <ion-list>
25   <ion-item>
26     <ion-icon name="leaf" item-left></ion-icon>
27       Herbology
28     <ion-icon name="rose" item-right></ion-icon>
29   </ion-item>
30 </ion-list>
31 
32 <ion-list>
33   <ion-item>
34     <ion-avatar item-left>
35       <img src="img/avatar-cher.png">
36     </ion-avatar>
37     <h2>Cher</h2>
38     <p>Ugh. As if.</p>
39   </ion-item>
40 </ion-list>
41 
42 <ion-list>
43   <ion-item>
44     <ion-avatar item-left>
45       <img src="img/avatar-finn.png">
46     </ion-avatar>
47     <h2>Finn</h2>
48     <h3>Don't Know What To Do!</h3>
49     <p>I've had a pretty messed up day. If we just...</p>
50   </ion-item>
51 </ion-list>
52 
53 <ion-list>
54   <ion-item-sliding>
55     <ion-item>
56       <ion-avatar item-left>
57         <img src="img/slimer.png">
58       </ion-avatar>
59       <h2>Slimer</h2>
60     </ion-item>
61     <ion-item-options side="left">
62       <button ion-button color="primary">
63         <ion-icon name="text"></ion-icon>
64         Text
65       </button>
66       <button ion-button color="secondary">
67         <ion-icon name="call"></ion-icon>
68         Call
69       </button>
70     </ion-item-options>
71     <ion-item-options side="right">
72       <button ion-button color="primary">
73         <ion-icon name="mail"></ion-icon>
74         Email
75       </button>
76     </ion-item-options>
77   </ion-item-sliding>
78 </ion-list>
79 
80 <ion-list>
81   <ion-item>
82     <ion-thumbnail item-left>
83       <img src="img/thumbnail-totoro.png">
84     </ion-thumbnail>
85     <h2>My Neighbor Totoro</h2>
86     <p>Hayao Miyazaki • 1988</p>
87     <button ion-button clear item-right>View</button>
88   </ion-item>
89 </ion-list>

 

posted on 2017-05-25 10:42  技术V类  阅读(256)  评论(0)    收藏  举报

导航