离子2 - 表

Question

我想像使用Bootstrap一样使用离子构建表格。

我希望我的桌子看起来像THIS LINK'S examples。

所以，我在Ionic's Docs找不到的功能是“表头”。我找到的所有示例都不考虑表头。

另外，在Ionic中是否有一种原生方式可以使表格颜色像Bootstrap的“上下文表格布局”一样具有响应性，如this link中的“响应表格布局”示例？

Answer 1

你可以通过几个样式规则使你的ionGrid看起来像那个链接中的那些。就像你说的那样，docs没有说标题，但你可以在那里使用<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;
}

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

---

UPDATE

从Ionic 3.0.0开始，Grid component已经更新，并且包含了许多新功能。您可以查看this working plunker以查看新网格组件的一些新功能。