SHARE
TWEET

Untitled

a guest May 22nd, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <ion-header>
  2.   <ion-navbar>
  3.     <ion-title>
  4.       Example List Component
  5.     </ion-title>
  6.   </ion-navbar>
  7. </ion-header>
  8.  
  9. <ion-content padding>
  10.   <h2> basic List</h2>
  11.   <ion-list >
  12.     <ion-item *ngFor="let ms of musics">
  13.       รหัสสินค้า <h2>{{ ms.id}}</h2>
  14.       ชื่อเพลง <h2>{{ ms.name}}</h2>
  15.     </ion-item>
  16.   </ion-list>
  17.   <h2> No Line </h2>
  18.   <ion-list no-lines >
  19.     <ion-item *ngFor="let mv of movies " >
  20.       {{ mv }}
  21.     </ion-item>
  22.   </ion-list>
  23.   <h2>inset</h2>
  24.   <ion-list inset>
  25.   <ion-item *ngFor="let fb of footballs" >
  26.     <h3>Team: {{ fb.name }}</h3>
  27.     <h4> Budget: {{ fb.budget }}</h4>
  28.   </ion-item>
  29.   </ion-list>  
  30.   <h2> Dividers </h2>
  31.   <ion-item-group>
  32.     <ion-item-divider color= "dark" >T</ion-item-divider>
  33.     <ion-item >Teera </ion-item>
  34.     <ion-item >Teerawat </ion-item>
  35.     <ion-item >Teerawit</ion-item>
  36.   </ion-item-group>
  37.   <h2>Headers</h2>
  38.   <ion-list-header color= "danger" >
  39.     Student
  40.   </ion-list-header >
  41.   <ion-item >Fitree</ion-item>
  42.   <ion-item >iffan</ion-item>
  43.   <ion-item >Ameen</ion-item>
  44.  
  45.  
  46.   <h2>Icons</h2>
  47.   <ion-list >
  48.     <ion-item *ngFor="let ic of icons">
  49.       <ion-icon name="{{ ic }}"></ion-icon>
  50.     </ion-item>
  51.   </ion-list>
  52.  
  53.   <h3>Avatar</h3>
  54.   <ion-list >
  55.       <ion-item *ngFor="let dm of doraemons">
  56.     <ion-avatar item-left>
  57.         <img src="../../assets/imgs/{{dm.photo}}">
  58.     </ion-avatar>
  59.     <h2>{{ dm.name }}</h2>
  60.       <p>{{ dm.grade}}</p>
  61.     </ion-item>
  62.   </ion-list>
  63.  
  64.   <h2>Sliding</h2>
  65.  <ion-list>
  66.    <ion-item-sliding *ngFor="let dm of doraemons" >
  67.      <ion-item>
  68.        <ion-avatar item-start>
  69.          <img src="../../assets/imgs/{{dm.photo}}">
  70.        </ion-avatar>
  71.        <h2>{{dm.name}}</h2>
  72.      </ion-item>
  73.      <ion-item-options side="left">
  74.        <button ion-button  color="secondary">
  75.          <ion-icon name="call"></ion-icon>
  76.          call
  77.        </button>
  78.        <button ion-button  color="primary">
  79.           <ion-icon name="text"></ion-icon>
  80.           text
  81.         </button>  
  82.      </ion-item-options>
  83.      <ion-item-options side="right">
  84.        <button ion-button  color="danger">
  85.         <ion-icon name="trash"></ion-icon>
  86.         delete
  87.       </button>  
  88.      </ion-item-options>
  89.    </ion-item-sliding>
  90.   </ion-list>
  91.  
  92. </ion-content>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top