ionic2
Ionic2 CSSコンポーネント

グリッド

Ionicのグリッドシステムは、IonicがサポートするすべてのデバイスでサポートされているCSS機能であるflexboxに基づいています。グリッドは、グリッド、ロー、およびカラムの3つのユニットで構成されています。列は行を塗りつぶすように展開され、追加の列に合わせてサイズが変更されます。

例。

    <ion-grid>
      <ion-row>
        <ion-col width-10>This column will take 10% of space</ion-col>
      </ion-row>
    </ion-grid>

カード

カードは重要なコンテンツを表示するのに最適な方法であり、アプリケーションのコアデザインパターンとして急速に浮上しています。これらは、情報を格納し整理する優れた方法であり、ユーザーに予測可能な期待を設定します。一度に表示する内容が多く、画面の不動産がほとんどないため、多くの企業にとってカードはすぐに設計パターンになりました。

例。

<ion-card>
  <ion-card-header>
        Header
  </ion-card-header>
  <ion-card-content>
        The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>