首页 文章

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

提问于
浏览 次
3

目前还不清楚如何在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作为最大宽度，比方说500px . 然后，如果视图大于500px，就像在iPad环境中一样，我想要col wrap - 2 col连续并且它们居中对齐 . 我将wrap属性添加到行中，但它似乎不起作用 .

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

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

ionic-framework responsive-design flexbox ionic2

2 回答

  • 3

    @Hugh Hou：我找到了一个很有意思的答案here . 似乎离子2缺少一些关于响应网格的文档 .

    您还应该参考以下关于离子1响应网格的链接 . here

    总而言之，归档您的目标 .

    • 在移动设备中将每个col显示为全宽 .

    • 在平板电脑设备中连续显示2个或更多col .

    尝试这样做

    <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>
    回复于
  • 1

    现在Ionic正在使用Bootstrap grid system . 我们可以使用离子网格上的 fixed 属性轻松完成此操作 .

    回复于

相关问题