Ionic - 如何将离子列表变成网格答案

【问题标题】：Ionic - How to turn an ion-list into a gridIonic - 如何将离子列表变成网格
【发布时间】：2017-05-24 14:47:43
【问题描述】：

我有一个可点击项目的离子列表，我想将其变成方形项目（框）的网格，但我不知道如何。请帮忙。

这是我的清单：

<ion-view>

  <ion-content>
     <ion-list >
      <ion-item ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

请问如何把这个变成方形物品盒？

【问题讨论】：

添加类名<ion-list class="row"> 和<ion-item class="col">。让我知道它是否有效
@Mr_Perfect 它可以工作，但它会将所有内容放在一个列中。

标签： html css angularjs ionic-framework ionic-view

【解决方案1】：

根据设备大小添加类。 class="col col-50" 用于显示每个项目的大小将是总宽度的 50%。欲了解更多信息http://ionicframework.com/docs/components/#grid

<ion-view>

  <ion-content>
     <ion-list class="row">
      <ion-item class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

如果您无法使用ion 标签进行操作，请尝试使用div 标签进行操作。

  <ion-content>
     <div class="row">
      <div class="col col-50" ng-repeat="letter in letters" href="#/letters/{{letter.number}}" class="letters-list">
        {{letter.title}}
      </div>
    </div>
  </ion-content>
</ion-view>

其中一个必须有效。当然两者都有。

【讨论】：

非常感谢@Mr_Perfect。我对这一切有点陌生。我有一个大约 50 件物品的清单，我需要每行 5 件。我添加了一个col-20，但它仍然将所有内容保存在一个列中。请问我如何每行有 5 个项目，即 5 列？谢谢
你能给我看一个像fiddle或plunker这样的编辑器中的演示或例子吗？
谢谢@Mr_Perfect。它与 div 一起工作。我现在只需要对盒子进行更多样式设置。

【解决方案2】：

也许这会对你有所帮助：

<ion-list>
<ion-grid>
  <ion-row>
    <ion-col <!-- Specify column size and start your loop here -->>
      <ion-item>
        {{letter.title}}
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid>

所有内容都将放在一行中，但通过指定 col 宽度，它将换行。从那里您可以设置单个项目或其内容的样式。

希望这能让你更接近一点。

【讨论】：