如何使用* ngfor创建像UI这样的图块 [英] How to create tiles like UI with *ngfor in ionic

问题描述

我正在尝试创建像

如何创建图块结构，如下图所示my ionic Application
home.html

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>

推荐答案

编辑：

使用Ionic解决方案 ion-col 。

Edit :
Solution using Ionic ion-col.

设置属性 col8 如果必须占据宽度的66％，则为true。如果属性不存在，则该项目将占用剩余空间（即，如果该行的其他项目具有 col8 属性，则为宽度的33％）。

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}]
];

迭代 allservices 生成行tile

<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>

使用ion-col进行演示

不使用Ionic的解决方案 ion-col 。

Solution without using Ionic ion-col.

首先， allservices 是一个数组数组。第一级数组用于瓦片行，第二级数组用于瓦片。

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
];

每个图块由一个标签和一个类组成，可以是 col4 或 col8 如果我们考虑 12列宽度离子原理。

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类

.col8 { 
    width: 66%; 
}

.col4 { 
    width: 33%; 
}

最后，我迭代 allservices 在视图中生成切片行：

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>

没有离子色的演示

这篇关于如何使用* ngfor创建像UI这样的图块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！