5

Bootstrap と同じように ionic を使用してテーブルを構築したいと思います。

テーブルをこのリンクの例のようにしたいと思います。

というわけで、 Ionic の Docsで見つけられなかった機能は「テーブル ヘッダー」でした。私が見つけたすべての例は、テーブル ヘッダーを考慮していません。

また、このリンクの「レスポンシブ テーブル レイアウト」の例のように、テーブルの行を 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 の「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;
}

また、Responsive Table Layoutについては、 overflow CSS プロパティをいじって実現できたとしても、サイド メニューを開くスライド効果などに影響を与える可能性があるため、それは良い考えではないと思います。 . テーブルの幅が大きすぎて画面に収まらない場合は、スクロール可能にする代わりに、最も重要なデータを含む 1 列または 2 列を表示し、詳細ページに移動するボタンを含めることをお勧めします。残りの情報を見ることができます。

アップデート

Ionic 3.0.0の時点で、Grid コンポーネントが更新され、多くの新機能が含まれています。この作業プランカーを見て、新しいグリッド コンポーネントの新機能のいくつかを確認できます。

于 2016-09-02T06:19:09.320 に答える