如何创建UI一样瓷砖* ngfor离子

如何创建砖结构，下面的图片进入我的离子应用 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>

来源

2017-11-11 Ajith Manali

编辑：使用离子ion-col
解决方案。

设置属性col8为真，如果它必须占用66％的宽度。如果财产不存在，物品将占用剩余空间（即，如果该行的其他物品具有col8财产，则为宽度的33％）。上allservices

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

迭代以产生瓦片

的行

<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

解而不使用离子ion-col。

首先，allservices是一个数组数组。第一层阵列是用于瓦片排，第二层阵列用于瓦片。

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 columns width Ionic principle的。

CSS类

.col8 { 
    width: 66%; 
} 

.col4 { 
    width: 33%; 
}

最后，我认为反覆allservices产生瓷砖的各排：

<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

来源

2017-11-11 23:39:09 Antikhippe

如何创建UI一样瓷砖* ngfor离子

回答

相关问题