Ionic4 learning notes 13 - Classification List of an East Project

1、Tab2 Page code

<ion-content>
  <div class="cate_content">
    <div class="cate_left">
      <ion-list lines="full">
        <ion-item *ngFor="let item of lCateList">
          <ion-label>{
   {item}}</ion-label>
        </ion-item>
      </ion-list>
    </div>

    <div class="cate_right">

      <ion-grid fixed>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{
   {item.title}}</p>
          </ion-col>

        </ion-row>

        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{
   {item.title}}</p>
          </ion-col>

        </ion-row>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{
   {item.title}}</p>
          </ion-col>

        </ion-row>
        <ion-row>
          <ion-col size="4" *ngFor="let item of rCateList">
            <img [src]="item.pic" />
            <p>{
   {item.title}}</p>
          </ion-col>

        </ion-row>
      </ion-grid>

    </div>
  </div>

</ion-content>

2、css Code （ important ）

.cate_content{
    width: 100%;

    height: 100%;

    display: flex;

    .cate_left{
        width: 9rem;
        height: 100%;
        overflow-y: auto;
       
    }

    .cate_right{

        flex:1;
        height: 100%;
        overflow-y: auto;
       
    }
}

3、 Data sources

 public lCateList:any[]=[];


  public rCateList:any[]=[];

  constructor(){

    // Left analog data 
    for(let i=0;i<16;i++){
      
      this.lCateList.push(` classification ${i}`);
    }

    // Right data 
    for(var i=1;i<=12;i++){
      this.rCateList.push({
        pic:'assets/list'+i+'.jpg',
        title:' The first '+i+' individual ',
      })
    }

  }