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

Question

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

这是我的清单：

<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>

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

Answer 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>

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

Answer 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>

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

希望这能让你们离得更近一些。

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

Ionic - How to turn an ion-list into a grid

html

css

angularjs

ionic-framework

ionic-view