列表、登陆窗口、栅格

 

1.举个列表的小例子

　　

    this.list1 = [
      {
        cate: '小米',
        list: [
          {'title':'m1'},
          {'title':'m2'},
          {'title':'m3'},
          {'title':'m4'}
        ]
      },
      {
        cate: '苹果',
        list: [
          {'title':'p1'},
          {'title':'p2'},
          {'title':'p3'},
          {'title':'p4'}
        ]
      }
    ]

　　html

  <ion-list *ngFor="let item of list1">
    <ion-item-divider>
      {{item.cate}}
    </ion-item-divider>
    <ion-item *ngFor="let val of item.list">
        <ion-icon name="person"></ion-icon> 
        &nbsp;&nbsp;{{val.title}}
    </ion-item>
  </ion-list>

 2.滑动列表

　　ion-list-sliding

　　

3.登陆窗口

　　ion-input

　　

　　html

  <div>
    <ion-item>
      <ion-input type="text" placeholder="账号"></ion-input>
    </ion-item>
    <ion-item>
      <ion-input type="password" placeholder="密码"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>记住密码</ion-label>
      <ion-toggle hecked="false"></ion-toggle>
    </ion-item>
    <button ion-button block>登陆</button>
  </div>

4.栅格

 　　可以实现类似一下的布局

　　　　

　　我们做一下排版测试

　　　　

　　html

  <div>
    <ion-row>
      <ion-col col-12>
        <ion-icon name="ionic" color="primary" style="font-size: 40px;"></ion-icon>
        <br>12/12
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-6>
        <ion-icon name="key" color="bright" style="font-size: 40px;"></ion-icon>
        <br>12/6
      </ion-col>
      <ion-col col-6>
        <ion-icon name="apps" style="font-size: 40px;"></ion-icon>
        <br>12/6
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-3>
        <ion-icon name="map" style="font-size: 40px;"></ion-icon>
        <br>12/3
      </ion-col>
      <ion-col col-3>
        <ion-icon name="navigate" style="font-size: 40px;"></ion-icon>
        <br>12/3
      </ion-col>
      <ion-col col-3>
        <ion-icon name="pin" style="font-size: 40px;"></ion-icon>
        <br>12/3
      </ion-col>
      <ion-col col-3>
        <ion-icon name="locate" style="font-size: 40px;"></ion-icon>
        <br>12/3
      </ion-col>
    </ion-row>
  </div>

　　css

ion-col{
    border: 1px solid #eee;
    text-align: center;
    height: 80px;
    margin-top: -1px;
    margin-left: -1px;
}