我正在尝试使用 Ionic 框架进行简单的卡片收集。
我正在使用 SpaceX API 来填充卡片。我的代码包含 Angular Directive(指令)。我构建了这个:
<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>
这个 *ngFor="let launch of list_launches"
用于从对象 list_launches 获取一些属性。
我找到了这个解决方案:
<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>
但是当我使用 *ngfor 参数时这不能正常工作。想要垂直对齐此 Ionic 卡片。
最佳答案
所以这里的问题是 Ionic grid 需要一个非通用模板来构建更复杂的网格。我总是觉得这些布局组件有点矫枉过正,因为大多数事情只需要几个 CSS 声明就可以完成。在你的情况下,我根本不会使用 ionic 网格并将它写在 CSS Grid 中。 .两个简单的 CSS 规则可以解决这个问题:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
我在这里创建了一个非常基本的网格,并告诉它它具有三个大小相同的列(1fr
表示 1 个分数)。
您还可以使用repeat
函数
display: grid;
grid-template-columns: repeat(3, 1fr);
代码也少得多:
<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>
https://stackblitz.com/edit/ionic-7qd5xf
更新:作为Thomas在评论中建议,在 ion-col
本身上使用 *ngFor
指令也足够了:
<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>
关于css - 将 Ionic 卡片与 Angular 指令垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53146150/