创建离子卡列表
Create Ionic card List
我正在尝试使用 angular 在 Ionic 5 上创建联系人列表,但无法访问此样式。我是 IONIC 的初学者,你能帮帮我吗?
怎么在卡的开头留下一张渲染图,一个icon加header,一个icon加subheader,如下图?
我的形象:
我的代码:
<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>
谢谢=)
您可以只使用离子项目列表。他们提供了一个圆形头像来启动项目,然后是一个标签,您可以修改该标签以采样您想要的结果。
<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>
我正在尝试使用 angular 在 Ionic 5 上创建联系人列表,但无法访问此样式。我是 IONIC 的初学者,你能帮帮我吗? 怎么在卡的开头留下一张渲染图,一个icon加header,一个icon加subheader,如下图?
我的形象:
我的代码:
<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>
谢谢=)
您可以只使用离子项目列表。他们提供了一个圆形头像来启动项目,然后是一个标签,您可以修改该标签以采样您想要的结果。
<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>