最大化离子网格中的列数（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