web-dev-qa-db-ja.com

Ionic 2-テーブル

Bootstrapと同じように、ionic）を使用してテーブルを作成したいと思います。

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

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

また、Ionicには、Bootstrapの「ContextualTable Layout」のように色付けされ、 このリンク の「ResponsiveTableLayout」の例のようにレスポンシブなテーブル行を作成するネイティブな方法がありますか？ ？

ionic-frameworkionic2ionic3grid-layout
5
Aleksandrus

いくつかのスタイルルールを使用して、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の「ContextualTable 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;
}

そして、レスポンシブテーブルレイアウトについては、overflowCSSプロパティで遊ぶことでそれを達成できたとしても、私は思いませんサイドメニューを開くためのスライド効果などに影響を与える可能性があるため、これは良い考えです。テーブルの幅が大きすぎて画面に収まらない場合は、スクロール可能にするのではなく、最も重要なデータを1〜2列表示し、詳細ページに移動するボタンを含めることをお勧めします。その情報の残りを見ることができます。

[〜＃〜]更新[〜＃〜]

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

8
sebaferreras