離子造型容器-有解無憂

可以幫助格式化我的離子代碼以使其看起來像圖 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>

我在前端沒有那么多經驗，非常感謝幫助謝謝

uj5u.com熱心網友回復：

最簡單的解決方案是使用嵌套網格。例如

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

您可能需要考慮將嵌套網格的卡片分解為單獨的行。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/361595.html

標籤：html angularjs 离子框架

上一篇：如何根據物件的值將物件陣列拆分為另一個陣列？

下一篇：等待AngularJS服務完成運行（chrome控制臺）