5

我想像在 Bootstrap 中一样使用 ionic 构建表。

我希望我的表格看起来像THIS LINK'S examples。

所以，我在Ionic 的文档中找不到的功能是“表头”。我发现的所有示例都没有考虑表头。

此外，Ionic 中是否有一种本地方法可以使表格行像 Bootstrap 的“上下文表格布局”一样着色并具有响应性，例如此链接中的“响应式表格布局”示例？

4

1 回答 1

8

只需几个样式规则，您就可以使您ionGrid看起来像该链接中的那些。就像你说的那样，文档没有说任何关于标题的内容，但你可以在<strong></strong>那里使用 html 元素：

  <!-- Header -->
  <ion-row>
    <ion-col>
      <strong>Product</strong>
    </ion-col>
    <ion-col>
      <strong>Payment Date</strong>
    </ion-col>
    <ion-col>
      <strong>Status</strong>
    </ion-col>
  </ion-row>

而且我认为没有一种本地方法可以使表格行像 Bootstrap 的“上下文表格布局”那样着色，但您可以通过一些样式规则来实现：

ion-row.active {
  background-color: #f5f5f5;
}

ion-row.success {
  background-color: #dff0d8;
}

ion-row.warning {
  background-color: #fcf8e3;
}

ion-row.error {
  background-color: #f2dede;
}

关于Responsive Table Layout，即使我们可以通过使用溢出CSS 属性来实现这一点，但我认为这不是一个好主意，因为它可能会影响其他事情，比如打开侧边菜单的滑动效果，或者类似的事情. 如果表格的宽度太大而无法适应屏幕，与其使其可滚动，更好的解决方案是显示一两列最重要的数据，并包含一个按钮，将您带到详细信息页面，您可以在其中可以看到其余的信息。

更新

从Ionic 3.0.0 开始，Grid 组件已经更新，并包含了许多新功能。您可以查看这个工作中的 plunker，了解新网格组件的一些新功能。

于 2016-09-02T06:19:09.320 回答