Richten Sie ionische Karten vertikal an Winkelanweisungen aus

Darleison Rodrigues

Ich versuche, eine einfache Kartensammlung mit dem Ionic-Framework durchzuführen.

Ich verwende die SpaceX-API, um die Karten zu füllen. Mein Code enthält Winkelanweisungen. Ich habe das gebaut:

<ion-grid>
  <ion-row>
    <ion-col col-4>
      <ion-card *ngFor="let launch of list_launches">
        <ion-card-header>
          {{ launch.mission_name }}
        </ion-card-header>
        <ion-card-content>
          <ion-thumbnail item-start>
            <img src="{{launch.links.mission_patch_small}}">
          </ion-thumbnail>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Dies *ngFor="let launch of list_launches"wird verwendet, um einige Attribute von Objekt list_launches abzurufen.

Meine Lösung

Ich habe diese Lösung gefunden:

<ion-row>
    <ion-col col-4>
      Left
    </ion-col>
    <ion-col col-4>
      Middle
    </ion-col>
    <ion-col col-4>
      Right
    </ion-col>
 </ion-row>

Dies funktioniert jedoch nicht ordnungsgemäß, wenn ich den Parameter * ngfor verwende. Möchten Sie diese ionischen Karten vertikal ausrichten.

mchl18

Das Problem hierbei ist also, dass das ionische Gitter erwartet, dass eine nicht generische Vorlage komplexere Gitter erstellt. Ich fand diese Layout-Komponenten immer übertrieben, da die meisten Dinge mit nur wenigen CSS-Deklarationen erledigt werden können. In Ihrem Fall würde ich das Ionengitter überhaupt nicht verwenden und es in CSS-Gitter schreiben . Zwei einfache CSS-Regeln können damit umgehen:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

Ich erstelle hier ein sehr einfaches Raster und sage ihm, dass es drei gleich große Spalten hat ( 1frbedeutet 1 Bruch).

Sie können die repeatFunktion auch verwenden

display: grid;
grid-template-columns: repeat(3, 1fr);

Auch viel weniger Code:

<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;">
  <ion-card  *ngFor="let launch of list_launches">
    <ion-card-header>
      {{ launch.mission_name }}
    </ion-card-header>
    <ion-card-content>
      <ion-thumbnail item-start>
        <img src="">
      </ion-thumbnail>
    </ion-card-content>
  </ion-card>
</div>

Das Ergebnis

https://stackblitz.com/edit/ionic-7qd5xf

Update : Wie Thomas in den Kommentaren vorgeschlagen hat, reicht es auch aus, die *ngForDirektive ion-colselbst zu verwenden:

<ion-row>
  <ion-col col-4 *ngFor="let launch of list_launches" >
    <ion-card >
      <ion-card-header>
        {{ launch.mission_name }}
      </ion-card-header>
      <ion-card-content>
        <ion-thumbnail item-start>
          <img src="">
        </ion-thumbnail>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

Verwandte Artikel

Richten Sie Optionsfelder vertikal aus

ExposedGun316 Grundsätzlich versuche ich, alle meine Schaltflächen wie bei der ersten Frage vertikal auszurichten. Ich kann nicht verstehen, warum ich die zweite Frage nicht richtig ausrichten kann. Ich habe verschiedene Dinge ausprobiert, z. B. die Eigenschaf

Richten Sie nachfolgende Backslashes vertikal aus

anon Ich habe eine Datei, die so aussieht: abc \ d \ efgh \ i jklmnop \ q \rst \ uv wx y \ z Für jede Gruppe aufeinanderfolgender Zeilen, die am Ende einen Backslash haben, möchte ich diese Backslashes in einer geraden vertikalen Linie anordnen. Die er

So richten Sie das Bild vertikal aus

Quantumbutterfly Ich versuche, ein Bild in einem Div vertikal auszurichten, aber alles, was ich versuche, funktioniert nicht. Ich versuche es in einer Material Design Lite Zelle zu zentrieren . Hier ist mein Code: CodePen HTML : <div class="mdl-grid"> <div c

Richten Sie Symbole und Text vertikal aus

Darren Sweeney Ich habe das Wort STERNE gefolgt von 5 Sternen ( &#9733;) Das Problem, das ich habe, ist, dass die Sterne kleiner als das Wort sind und ich möchte, dass sie vertikal ausgerichtet sind, aber ich kann nicht herausfinden, wie. Folgendes versuche ic

So richten Sie eine Absatzmitte vertikal aus

Bogaso Ich habe einen kleinen Absatz auf einer Seite, den ich sowohl horizontal als auch vertikal mittig ausrichten möchte . Das horizontale Ausrichten der Mitte ist recht einfach, ich habe jedoch Schwierigkeiten, einen Weg zu finden, um diesen Absatz vertikal

Richten Sie das Materialsymbol vertikal aus

Kentor Ich versuche, meinen "Dropdown-Pfeil" in einem Navigationsmenü vertikal auszurichten. Ich habe verschiedene Hings wie Vertical-Align: Middle, Display: Inline-Block und ähnliches ausprobiert, aber das hat überhaupt nicht geholfen. http://img02.imgland.ne

Richten Sie Inline-Listenelemente vertikal aus

Fred J. Das Rot check-counterschwebt wie erwartet nach rechts, bleibt jedoch beim Schrumpfen des Bildschirms nicht vertikal ausgerichtet. Wie kann es vertikal ausgerichtet bleiben, unabhängig davon, wie viele Zeilen der Text im Text check-labeleinnimmt? Vielen

Richten Sie checkBoxGroupInput vertikal und horizontal aus

Ferroao In einem ähnlichen Beitrag ( So richten Sie eine Gruppe von checkboxGroupInput in R Shiny aus ) werden Kontrollkästchen nur vertikal (wie in meinem Beispiel) oder nur horizontal ( R Shiny zeigt checkboxGroupInput horizontal aus ) ausgerichtet. Ich frag