ionic 表格的几种样式

1.普通表格的构造过程。

 <ion-list>  <!--表格标签-->
  <ion-list-header><!--表格头-->
    Settings
  </ion-list-header>

  <ion-item><!--单元格-->
    <ion-icon name="plane" item-start color="danger"></ion-icon>
    <ion-label>Airplane Mode</ion-label>
    <ion-toggle color="secondary"></ion-toggle>
  </ion-item>
</ion-list>

<button ion-item> 表示右边有更多箭头
<ion-item> 表示右边无更多箭头
<item-start> 表示是在左侧
<item-end>表示是在右侧
<ion-label>大标题
<ion-note item-end>表示的是右边的设置小标题 。

2. 单选表格的构造过程。

    <ion-list radio-group>
       <ion-list-header>
        Silence Phone
      </ion-list-header>
     <!--[(ngModel)]="pepperoni" (ionChange)="upDatePepper()"-->
     <ion-item>
    <ion-label color="dark">Always</ion-label>
    <ion-radio value="always" ></ion-radio>
    </ion-item>
    <ion-item>
    <ion-label color="dark">Only while phone is locked</ion-label>
    <ion-radio value="locked"></ion-radio>
    </ion-item>
    </ion-list>
   

相比较于1 。<ion-list > 标签内多了 radio-group , <ion-item> 标签 多了 <ion-radio>.

3.右侧设置按钮

<ion-item>
    <ion-icon name="paw" item-start color="danger"></ion-icon>
    <ion-label>Barkpark</ion-label>
    <button ion-button round item-end>Uninstall</button>
  </ion-item>

4. 完整的表格

       <button ion-item>
           <ion-icon name="wifi" item-start color="primary"></ion-icon>
           <ion-label>Wi-Fi</ion-label>
         <ion-note item-end>The Interwebz</ion-note>
      </button>
   

5.圆形图片形式..

  <ion-item>
    <ion-avatar item-start>
   ![](../../assets/imgs/slide4.jpeg)
 </ion-avatar>
     <h3 class="avah">测试</h3>
     <p>测试</p>
  </ion-item>

6. 方形图片

  <ion-item>
<ion-thumbnail item-start>
  ![](assets/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>

7.出现编辑菜单

 <ion-item-sliding>
  <ion-item>
    <ion-avatar item-start>
      ![](../../assets/imgs/slide4.jpeg)
    </ion-avatar>
    <h2>Venkman</h2>
    <p>Back off man, I'm a scientist.</p>
  </ion-item>
  <ion-item-options>
    <button ion-button color="light" icon-start>
      <ion-icon name="ios-more"></ion-icon>
      More
    </button>
    <button ion-button color="primary" icon-start>
      <ion-icon name="text"></ion-icon>
      Text
    </button>
    <button ion-button color="secondary" icon-start>
      <ion-icon name="call"></ion-icon>
      Call
    </button>
  </ion-item-options>
</ion-item-sliding>

组头

   <ion-item-group>
    <ion-item-divider color="light">A</ion-item-divider>
  <ion-item>Angola</ion-item>
  <ion-item>Argentina</ion-item>
  <ion-item>Armenia</ion-item>
  <ion-item>Australia</ion-item>
  <ion-item>Austria</ion-item>
</ion-item-group>