Search code examples
cssangularionic-frameworkionic2ionic4

Create Ionic card List

I am trying to create a contact list on Ionic 5, using angular, but it is not possible to access this style. I'm a beginner at IONIC, can you help me? How to leave a rendered image at the beginning of the card, with a icon and header and a icon with subheader, as in the image below?

my image: enter image description here

my code:

    <ion-content padding>
  <ion-card>
    <ion-grid>
     <ion-row>
      <ion-col>
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="border-radius: 50%; width: 80%; height: 85%">
    </ion-col>
    <ion-col>
    <ion-item>
      <h2>Marty McFly</h2>
    </ion-item> 
    <ion-card-content>
      <p>Wait a minute. Wait a minute, Doc. Uhhh</p>
    </ion-card-content>
    </ion-col>
     </ion-row>
    </ion-grid>

  </ion-card>
  </ion-content>

Thanks =)

Solution

  • You could just use a list of ion-items. They provide a round avatar to start the item, followed with a label which you can modify to sample your desired outcome.

    <ion-content>
  <ion-list>
    <ion-item *ngFor="your loop here">
      <ion-avatar slot="start">
        <img src="...">
      </ion-avatar>
      <ion-label>
        <ion-grid>
          <ion-row>
            <ion-col size="12">
              <!-- name -->
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="2">
              <!-- icon -->
            </ion-col>
            <ion-col size="10">
              <!-- calender -->
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col size="2">
              <!-- icon -->
            </ion-col>
            <ion-col size="10">
              <!-- time -->
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>