ionic2
Ionic2 CSSコンポーネント
サーチ…
グリッド
Ionicのグリッドシステムは、IonicがサポートするすべてのデバイスでサポートされているCSS機能であるflexboxに基づいています。グリッドは、グリッド、ロー、およびカラムの3つのユニットで構成されています。列は行を塗りつぶすように展開され、追加の列に合わせてサイズが変更されます。
クラス | 幅 |
---|---|
幅-10 | 10% |
幅-20 | 20% |
幅 - 25 | 25% |
幅33 | 33.3333% |
幅50 | 50% |
幅67 | 66.6666% |
幅 - 75 | 75% |
幅80 | 80% |
幅-90 | 90% |
例。
<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>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow