ionic-framework
イオン性のCSSコンポーネント
サーチ…
備考
Ionicには、次のハイブリッドモバイルアプリケーションをコーディングしながら、あなたの人生をより楽にするために宣言されたCSSコンポーネントが多数用意されています。これらのコンポーネントは、基本グリッドシステムからフォームのスタイリングまでさまざまです。これらのコンポーネントは、あらかじめ設定されたCSSスタイルシートを使用してIonicをインストールする場合に使用します。
Ionic CSSがあなたの手に与える基本的な機能の1つは、最初から色のセットが付属していますが、一般的には色は上書きされることになっています。命名規則を設定するのに役立つユーティリティーカラーが追加されています。あなたはそれをアプリケーションの基本テーマと呼ぶことができます。色をカスタマイズするには、ionic.css CSSファイルからの色を単純に上書きできます。さらに、IonicはSassを使用して構築されているので、より多くのパワーと柔軟性を得るために、_variables.scssファイル内のカラー変数を変更して拡張することもできます。
あなたの端末でionic setup sassコマンドを実行することで、SASSを使いやすいようにIonicプロジェクトをセットアップすることができます。
公式文書はIonic CSSでご覧いただけます： http : //ionicframework.com/docs/components/
基本グリッドシステムの構文
基本グリッド
Ionicでは、 rowクラスを要素に設定してrow宣言できます。行は水平に整列された要素になり、この要素内のすべてが行に属します。行内では、幅の異なる列を宣言できます。次の宣言を選択できます。
| クラス | 幅 |
|---|---|
| .col-10 | 10％ |
| .col-20 | 20％ |
| .col-25 | 25％ |
| .col-33 | 33.3333％ |
| .col-50 | 50％ |
| .col-67 | 66.6666％ |
| .col-75 | 75％ |
| .col-80 | 80％ |
| .col-90 | 90％ |
最大値の列は100の行内にあります。次に、基本グリッドの例をいくつか示します。
<div class="row">
<div class="col col-50">.col.col-50</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-75">.col.col-75</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col col-75">.col.col-75</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
オフセットグリッド
col-offset-<value>を設定することもできます。下の例では、幅カラムの3分の1は幅オフセットの3分の1です。つまり、幅が3分の1になり、ページがオフセットされてページ中央に配置されます。
<div class="row">
<div class="col col-33 col-offset-33">.col</div>
<div class="col">.col</div>
</div>
列の整列
col-<align_value>をこれとは別に列に設定することで、列を垂直にcol-<align_value>させることができます。
<div class="row">
<div class="col col-top">.col</div>
<div class="col col-center">.col</div>
<div class="col col-bottom">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
上記の方法では、各列を独自の列に配置します。行内のすべての列を揃えたい場合は、行自体に揃え値を設定できます。下の例では、この行の中のすべての列は、行の中央で垂直に整列します。
<div class="row row-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
レスポンスグリッド
また、いくつかのビューポートの幅で互いに重ねて積み重ねられるので、列を反応させることもできます。あなたには3つの選択肢があります。
| クラス | ブレークポイント（およそ） |
|---|---|
| .responsive-sm | 景観電話よりも小さい |
| .responsive-md | 縦型タブレットよりも小さい |
| .responsive-lg | 風景タブレットよりも小さい |
この例では、これらの列はほぼ横長の電話の幅で積み重ねられます。
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
これらのブレークポイントがあなたに適していない場合や、より具体的なブレークポイントが必要な場合は、もちろん自分のメディアクエリを作成することもできます。
基本的なリスト項目の構文
ほぼすべてのアプリケーションには何らかのリストがあります。 Ionicには、アプリケーション内で簡単にリストを作成できるように、組み込みのready-to-goリスト項目のCSS宣言があります。 HTML要素を使用してクラスの宣言をしたり、ディレクティブのion-listを使ってそれらを作ることができます。ディレクティブの例は一番下にあります。
基本的なリスト項目CSS構文：
<ul class="list">
<li class="item"></li>
</ul>
仕切り付きリスト：
<div class="list">
<a class="item" href="#">
List item
</a>
<div class="item item-divider">
Divider that looks a bit different from items
</div>
<a class="item" href="#">
Another list item
</a>
</div>
アイコン付きのアイテムをリストする：
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-trash-b"></i>
List item with a trashcan icon on the left
</a>
</div>
アイテムの両側に次の構文でアイコンを設定することもできます。
<div class="list">
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-trash-b"></i>
List item with a trashcan icon on the left and a briefcase icon on the right
<i class="icon ion-briefcase"></i>
</a>
</div>
ボタンまたはボタンを含むリスト項目は、次のように作成できます。
<div class="list">
<div class="item item-button-right">
Item with a button on the right that has a clock icon in it
<button class="button button-positive">
<i class="icon ion-clock"></i>
</button>
</div>
</div>
アバター、サムネイル、およびインセットを使用してリストアイテムを作成し、リストアイテムの周りにパディングを作成することもできます。 Ionicはまた、リスト項目に応じてパディングを設定することによって、リスト項目の設定アイコンなどを処理する。
Ionicには、チェックボックス、ラジオボタンなどのための独自の指示があります。これはIonicのチェックボックスリストの例です。
<ion-list>
<ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
<ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>
ユーティリティーカラーの基本的な使い方
プリセットイオニックCSSはテーマとプリセットカラーを持っています。 ionic.cssまたはカスタムCSSファイルの基本値を変更または上書きできます。これらをSASSで定義し、IonicでSASSを使用するには、端末でionic setup sassコマンドを実行するだけです。
ボタンの色の基本的な使い方。 button-<phrase>クラスはボタンの背景を作成し、テーマを設定します。
<button class="button button-positive">
button-positive
</button>
<button class="button button-calm">
button-calm
</button>
<button class="button button-balanced">
button-balanced
</button>
CSSプレフィックスの選択肢は次のとおりです。
<element>-light<element>-stable<element>-positive<element>-calm<element>-balanced<element>-energized<element>-assertive<element>-royal<element>-dark
これらのクラスは、バッジなどにも追加できます。バッジの例を次に示します。
<span class="badge badge-positive">Positive badge</span>