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>

一切都將放在一行中，但通過指定 col 寬度它將被包裝。 從那里您可以設置單個項目或其內容的樣式。

希望這能讓你更接近一點。