Ionic 2 - 表格

Question

我想像 Bootstrap 一样使用 ionic 构建 tables。

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

所以，我在 Ionic's Docs 中找不到的功能是 "table headers"。我找到的所有示例都没有考虑 table headers.

此外，在 Ionic 中是否有一种本机方法可以使 table 行的颜色像 Bootstrap 的 "Contextual Table Layout" 和响应式一样，例如“ this link?

中的响应式 Table 布局”示例

Answer 1

您可以使 ionGrid 看起来像 link 中的那些，只需一些样式规则。就像你说的，文档没有提到 headers，但是你可以在那里使用 <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>

而且我认为没有 本地方法 使 table 行的颜色像 Bootstrap 的 "Contextual Table Layout" 但你可以实现只有一些样式规则：

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

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

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

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

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

更新

从 Ionic 3.0.0, the Grid component has been updated, and a lot of new features were included. You can take a look at this working plunker 开始查看新网格组件的一些新功能。

Ionic 2 - 表格

Ionic 2 - Tables

grid-layout

ionic-framework

ionic2

ionic3