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>

所有内容都将放在一行中，但是通过指定col宽度将其包装。在这里，您可以为单个项目或其内容设置样式。

希望这会使您更近一点。

离子 - 如何将离子列表转换为网格

2 个答案: