Ionic组件之lists,Ionic列表组件的种类比较多,总共有9种列表方式。

基本列表效果图

list.png

直接上代码

lists.ts

import { Component } from '@angular/core';

@Component({
   templateUrl:'lists.html'
})

export class Lists{
   items = [
       'Pokémon Yellow',
       'Super Metroid',
       'Mega Man X',
       'The Legend of Zelda',
       'Pac-Man',
   ];
   itemSelected(item:string){
       console.log('Selected Item',item);
   }
}

lists.html

<ion-header>
   <ion-navbar>
       <ion-title>Lists</ion-title>
   </ion-navbar>
</ion-header>
<ion-content>
   <!--这里主要有3种列表方式,基本列表,没有下边框列表no-lines,内嵌列表inset-->
   <ion-list no-lines inset>
       <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">{{item}}</button>
   </ion-list>
   <!--List Dividers-->
   <ion-item-group>
       <ion-item-divider color="light">A</ion-item-divider>
       <ion-item>Angola</ion-item>
       <ion-item>Angola</ion-item>
   </ion-item-group>
   <ion-item-group>
       <ion-item-divider color="light">B</ion-item-divider>
       <ion-item>Bngola</ion-item>
       <ion-item>Bgola</ion-item>
   </ion-item-group>
   
   <!--List Headers-->
   <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-->
   <ion-list>
       <ion-item>
           <ion-icon name="leaf" item-start></ion-icon>
           Herbology
           <ion-icon name="rose" item-end></ion-icon>
       </ion-item>
   </ion-list>

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

   <!--Multi-line List-->
   <ion-list>
       <ion-item>
           <ion-avatar item-start>
               <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>

   <!--Thumbnail List-->
   <ion-list>
       <ion-item>
           <ion-thumbnail item-start>
               <img src="img/thumbnail-totoro.png">
           </ion-thumbnail>
           <h2>My Neighbor Totoro</h2>
           <p>Hayao Miyazaki • 1988</p>
           <button ion-button clear item-end>View</button>
       </ion-item>
   </ion-list>

   <!--Sliding List-->
   <ion-list>
       <ion-item-sliding>
           <ion-item>
               <ion-avatar item-start><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="text"></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>

</ion-content>

上一篇:Ionic组件之Icons与inputs

下一篇:Ionic组件之Loading