离子2 - 表

Question

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

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

因此，我在Ionic's Docs中找不到的功能是“表格标题”。我找到的所有示例都不考虑表头。

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

Answer 1

您可以使用一些样式规则使ionGrid看起来像该链接中的<strong></strong>。就像你说的那样，docs不会对标题说些什么，但是你可以在那里使用 <!-- 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> html元素：

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

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

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

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

而且我认为没有原生方式可以使表格颜色像Bootstrap＆＃34;上下文表格布局＆＃34;但你可以通过一些风格规则来实现这一目标：

context processor

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

<强>更新

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