列表、登陆窗口、栅格
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> {{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; }