创建离子卡列表-前端问题

Create Ionic card List(创建离子卡列表)

本文介绍了创建离子卡列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用角度在Ionic 5上创建联系人列表，但无法访问此样式。我是Ionic的初学者，你能帮我吗？如何在卡片的开头保留渲染图像，包括图标和标题，以及带有副标题的图标，如下图所示？

我的形象：

我的代码：

    <ion-content padding>
  <ion-card>
    <ion-grid>
     <ion-row>
      <ion-col>
    <img src="aHR0cHM6Ly9tYXRlcmlhbC5hbmd1bGFyLmlvL2Fzc2V0cy9pbWcvZXhhbXBsZXMvc2hpYmExLmpwZw==" 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>

谢谢=)

推荐答案

您可以只使用离子项列表。他们提供了一个圆形头像来开始项目，后面跟着一个标签，您可以修改标签来采样您想要的结果。

<ion-content>
  <ion-list>
    <ion-item *ngFor="your loop here">
      <ion-avatar slot="start">
        <img src="Li4u">
      </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>

这篇关于创建离子卡列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！