离子造型容器
Ionic styling container
能否帮助格式化我的离子代码以使其看起来像图 1?
图2是现在的样子
代码如下:
<ion-content >
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
<ion-row class="ion-text-center" >
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
我在前端方面的经验不多,非常感谢您的帮助谢谢
最简单的解决方案是使用嵌套网格。例如
<ion-grid>
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
您可能想要查看将嵌套网格的卡片分解成单独的行。
能否帮助格式化我的离子代码以使其看起来像图 1?
图2是现在的样子
代码如下:
<ion-content >
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
<ion-row class="ion-text-center" >
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col >
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
我在前端方面的经验不多,非常感谢您的帮助谢谢
最简单的解决方案是使用嵌套网格。例如
<ion-grid>
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player1.svg"/>
<ion-card-header>
<ion-card-title>{{this.player1["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player1["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-grid>
<ion-row class="ion-text-center">
<ion-col size="0.9" *ngFor="let c of images; let i = index">
<img src="../assets/cards/cardBackground/cardBackground.png" *ngIf="!c.isFlipped" (click)="selectCard(c)"/>
<img [src]="imageDir + c.name + '.png'" *ngIf="c.isFlipped && !c.isMatched" (click)="selectCard(c)"/>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col size="3">
<ion-card class="card-class">
<img src="../assets/playIcons/player2.svg"/>
<ion-card-header>
<ion-card-title>{{this.player2["name"]}}</ion-card-title>
<ion-card-title>Score: {{this.player2["score"]}}</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
您可能想要查看将嵌套网格的卡片分解成单独的行。