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.

ion-grid con columnas alternadas

02 Aug, 2023 Programación

No estoy muy familiarizado con Angular. Me gustaría tener una cuadrícula como esta:

imagen de ejemplo

Es decir, tener una imagen por fila alternando con dos imágenes. Intenté con este código, pero obtengo una cuadrícula ligeramente diferente (también obtengo la misma imagen dos veces porque no sé cómo aumentar el índice dentro del bucle):

.html:

<ion-content>

  <ion-grid class="design">
    <ion-row size="12" *ngfor="let t of types ; let i=index">
      <ion-col *ngif="i%3==0" size="12">
        <img oncontextmenu="return false;" src="{{t?.img}}" class="center">
      </ion-col>
      <ion-col *ngif="i%3!=0" size="6">
        <img oncontextmenu="return false;" src="{{t?.img}}" class="center">
      </ion-col>
      <ion-col *ngif="i%3!=0" size="6">
        <img oncontextmenu="return false;" src="{{types[i+1]?.img}}" class="center">
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-content>

.scss:

.design {
  position: center;
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
}

.center {
  display: block;
  width: 100%;
}

¿Cómo puedo modificarlo?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr la cuadrícula deseada, puedes modificar el código utilizando ion-row y ion-col anidados. Aquí tienes una posible solución:

    <ion-content>
  <ion-grid class="design">
    <ion-row *ngfor="let t of types; let i=index">
      <ion-col size="12">
        <img oncontextmenu="return false" [src]="t.img" class="center">
      </ion-col>
      <ng-container *ngif="(i + 1) % 3 === 0">
        </ng-container></ion-row>
        <ion-row>
          <ion-col size="6">
            <img oncontextmenu="return false" [src]="types[i-1]?.img" class="center" *ngif="i-1>=0">
          </ion-col>
          <ion-col size="6">
            <img oncontextmenu="return false" [src]="types[i+1]?.img" class="center" *ngif="i+1<types.length">
          </ion-col>
        </ion-row>


  </ion-grid>
</ion-content>

    En este fragmento de código, primero iteramos a través del array types utilizando la directiva *ngFor, similar al código anterior. Luego, para cada type, creamos un ion-row con un solo ion-col que contiene la imagen.

    A continuación, utilizamos la directiva *ngIf y el índice (i) para determinar si necesitamos insertar un nuevo ion-row para las imágenes siguientes. Específicamente, comprobamos si el índice es múltiplo de 3 (es decir, si es la tercera, sexta, novena, etc., imagen), y si es así, cerramos el ion-row actual y abrimos uno nuevo, que contiene dos elementos ion-col, cada uno con una imagen.

    Ten en cuenta que utilizamos el elemento ng-container para agrupar los dos elementos ion-col, de modo que podamos aplicar la directiva *ngIf a ambos. Además, utilizamos el índice (i) para acceder a las imágenes anterior y siguiente en el array types utilizando las expresiones types[i-1] y types[i+1], respectivamente. Por último, utilizamos la directiva *ngIf para comprobar si estos elementos existen en el array, para evitar errores.

    Con estas modificaciones, el código debería generar la cuadrícula deseada.

Comments are closed.