es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Contenedor de estilo iónico

22 May, 2023 Programación

¿Podría alguien ayudarme a dar formato a mi código de Ionic para que se vea como en la imagen 1?

La imagen 2 muestra cómo se ve actualmente.

Aquí está el código:







</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>Puntuación: {{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>Puntuación: {{this.player2["score"]}}</ion-card-title>
      </ion-card-header>
    </ion-card>

  </ion-col>


</ion-row>

No tengo mucha experiencia en frontend y realmente agradecería su ayuda. Muchas gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Aquí está el código formateado:

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

Comments are closed.