如何在 Ionic 2 中获得响应式网格布局

Posted 2023-03-07

【中文标题】如何在 Ionic 2 中获得响应式网格布局

【英文标题】：How to get a responsive grid layout in Ionic 2

【发布时间】：2016-11-23 01:56:47

【问题描述】：

目前还不清楚如何在 Ionic 2 中创建响应式布局网格。我希望有人能对这个主题有所了解。

我有一个grid：

<ion-content class="home card-background-page" padding>
  <ion-row wrap>
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">location.data.name</div>
        <div class="card-subtitle">location.data.date</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>

我希望 ion-col 的最大宽度为 500 像素。然后，如果视图大于 500 像素（如 iPad 横向），我想要 col wrap - 2 col 连续并且它们居中对齐。我在行上添加了 wrap 属性，但它似乎不起作用。

另外，Ionic2 中是否有响应式网格？如果是这样，我该如何使用它？我还希望离子内容具有最大宽度，并且当屏幕宽度大于最大宽度时将居中对齐。现在，离子含量是绝对位置，不允许居中。

使用 Ionic 2 实现响应式布局的最佳策略是什么？

【参考方案1】：

现在 Ionic 正在使用Bootstrap grid system。我们可以使用 ion-grid 上的 fixed 属性轻松做到这一点。

【参考方案2】：

@Hugh Hou：我找到了一个很好的有趣答案here。似乎 ionic 2 缺少一些有关响应式网格的文档。

您还应该参考以下链接以了解 ionic 1 响应式网格。 here

总之，归档你的目标。

在移动设备中将每列显示为全角。 在平板设备中连续显示 2 个或更多列。

尝试这样做

<ion-content class="home card-background-page" padding>
  <ion-row responsive-sm>      
    <ion-col>
      <ion-card *ngFor="let location of dataService.allLocationDetail.location | keys" (click)="openPage(location.data.locationId)">
        <img [src]="location.data.coverArt"/>
        <div class="card-title">location.data.name</div>
        <div class="card-subtitle">location.data.date</div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-content>