最大化離子網格中的列數（24 列）（自定義離子網格列）

Question

你能幫我看看怎么可能有一個 24 列的離子網格？ 在離子頁面 ( https://ionicframework.com/docs/layout/grid ) 上，我可以找到屬性“--ion-grid-columns”，該屬性位於“列數”標題下。 但是，沒有示例如何使用它。 web 頁面還說可以使用您喜歡的列數自定義網格。

你以這種方式使用財產嗎？

在 html

 <ion-grid class="myGrid">
     <ion-row>
      <ion-col>Example</ion-col>
    (24 times ...)
      </ion-row>
    </ion-grid>

在 css. 文件中

.myGrid{
--ion-grid-columns: 24;
}

但是，用這種方法。 這對我的網格沒有任何影響。 如何在離子網格中定義 24 列？ 非常感謝你。

Answer 1

在您的 ion-col 中放置一個 size="1" 它將起作用：

<ion-grid>
  <ion-row>
    <ion-col size="1">
      your content
    </ion-col>
  </ion-row>
</ion-grid>

Answer 2

您可以在 ion-col html 標簽上添加 ngFor（例如：ngFor="let item of items"）並且您必須在 ts 文件中定義“items”變量（例如：items = new Array(24);）

• 這是針對 angular 框架的（您也可以以類似的方式為 react 或 vue 執行此操作）

Answer 3

確保在ion-col上指定size 。

CSS 檔案：

ion-grid {
    --ion-grid-columns: 24;
}

HTML 檔案：

<ion-grid>
  <ion-row>
    <ion-col *ngFor="let column of [].constructor( 24 ); index as i" size="1">
      {{ i }}
    </ion-col>
  </ion-row>
</ion-grid>

Stackblitz 示例：

https://stackblitz.com/edit/ionic-angular-v5-aa5fc5?file=src/app/components/test/test.component.html