イオン-色

Ionicフレームワークで利用可能な実際の要素から始める前に、Ionicがさまざまな要素の色をどのように利用するかについて少し理解してみましょう。

イオン色のクラス

Ionicフレームワークは、* 9つの定義済みカラークラス*のセットを提供します。これらの色を使用するか、独自のスタイルで上書きできます。

次の表は、Ionicが提供するデフォルトの9色のセットを示しています。このチュートリアルでは、これらの色を使用してさまざまなイオン要素のスタイルを設定します。今のところ、以下に示すように、すべての色を確認できます-

Class	Description	Result
light	To be used for white color
stable	To be used for light grey color
positive	To be used for blue color
calm	To be used for light blue color
balanced	To be used for green color
energized	To be used for yellow color
assertive	To be used for red color
royal	To be used for violet color
dark	To be used for black color

Ionicは、要素ごとに異なるクラスを使用します。たとえば、ヘッダー要素には bar クラスがあり、ボタンには button クラスがあります。使用法を簡素化するために、色名の要素クラスに接頭辞を付けることで異なる色を使用します。

たとえば、青色のヘッダーを作成するには、次のように bar-calm を使用します-

<div class = "bar bar-header bar-calm">
   ...
</div>

同様に、灰色のボタンを作成するには、次のように button-stable クラスを使用します。

<div class = "button button-stable">
   ...
</div>

他のCSSクラスと同様にIonicカラークラスを使用することもできます。次に、バランスの取れた（緑色）と通電された（黄色）色で2つの段落をスタイルします。

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは、次の画面を生成します-

さまざまなクラスを使用してさまざまな要素を作成するときに、後続の章で詳細に説明します。

CSSを使用してIonicのデフォルトの色の一部を変更する場合は、 lib/css/ionic.css ファイルを編集して変更できます。場合によっては、すべての要素（ヘッダー、ボタン、フッターなど）が独自のスタイリングクラスを使用するため、このアプローチはあまり生産的ではありません。

したがって、「light」クラスの色をオレンジに変更する場合は、このクラスを使用するすべての要素を検索して変更する必要があります。これは、単一の要素の色を変更する場合に役立ちますが、時間がかかりすぎるため、すべての要素の色を変更するにはあまり実用的ではありません。

SASS（これは– Syntactically Awesome Style Sheet の短縮形です）は、すべての要素の色を一度に変更する簡単な方法を提供します。 SASSを使用する場合は、コマンドウィンドウでプロジェクトを開き、次のように入力します-

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

これにより、プロジェクトのSASSが設定されます。 scss/ionic.app.scss ファイルを開き、この行の前に次のコードを入力して、デフォルトの色を変更できます。 @ import "www/lib/ionic/scss/ionic";

バランスのとれた色を濃い青に変更し、通電した色をオレンジに変更します。上記で使用した2つの段落は、濃い青とオレンジになりました。

$balanced: #000066 !default;
$energized: #FFA500 !default;

さて、次の例を使用する場合-

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは、次の画面を生成します-

これらのクラスを使用しているすべてのイオン要素は、濃い青とオレンジに変わります。 Ionicのデフォルトカラークラスを使用する必要がないことを考慮してください。いつでも好きな方法で要素をスタイルできます。

SASSをインストールすると、 www/css/style.css ファイルがindexlのヘッダーから削除されます。それでも使用する場合は、手動でリンクする必要があります。 indexlを開き、ヘッダー内に次のコードを追加します。

<link href = "css/style.css" rel = "stylesheet">