How to create tiles like UI with *ngfor in ionic

问题:

I'am trying to create a tiles like template like

How can i create the tiles structure as the below image into my ionic Application home.html

<ion-row responsive-sm wrap>
   <ion-col   *ngFor="let item of allservices ;let i = index " [ngClass]="
   {'col1':i==0}">
   <img src={{item.icon}} />
   <div class="myOverlay">
   <div class="card-title">San Francisco</div>
   <div class="card-subtitle">72 Listings</div>
   </div>
   </ion-col>
</ion-row>

回答1:

Edit :
Solution using Ionic ion-col.

Set a property col8 to true to an item if it has to take 66% of width. If property not present, the item will take remaining space (i.e. 33% of width if the other item of the row has col8 property).

allservices = [
  [{label:'Academic', col8:true}, {label:'School'}],
  [{label:'Circular'}, {label:'Attendance'}, {label:'Home'}],
  [{label:'Progress'}, {label:'Class', col8:true}]
];

Iterate on allservices to generate the rows of tiles

<ion-row *ngFor="let row of allservices">
  <ng-container *ngFor="let item of row">
    <ion-col style="padding:1px;" [attr.col-8]="item.col8">
      <div class="tile">{{item.label}}</div>
    </ion-col>
  </ng-container>
</ion-row>

Demo with ion-col

---

Solution without using Ionic ion-col.

First, allservices is an array of arrays. First level of arrays are for rows of tiles and second level of arrays are for tiles.

allservices = [
  [{label:'Academic', class:'col8'}, {label:'School', class:'col4'}], // first row
  [{label:'Circular', class:'col4'}, {label:'Attendance', class:'col4'}, {label:'Home', class:'col4'}], // second row
  [{label:'Progress', class:'col4'}, {label:'Class', class:'col8'}] // third row
];

Each tile is composed of a label and a class which can be col4 or col8 if we consider the 12 columns width Ionic principle.

CSS classes

.col8 { 
    width: 66%; 
}

.col4 { 
    width: 33%; 
}

Finally, I iterate on allservices in the view to generate the rows of tiles :

<ion-row *ngFor="let row of allservices">
  <div *ngFor="let item of row" class="{{item.class}}" style="padding:1px;">
    <div class="tile">{{item.label}}</div>
  </div>
</ion-row>

Demo without ion-col