Ionic - 顏色

在我們開始使用 Ionic 框架中提供的實際元素之前，讓我們先了解一下 Ionic 如何使用顏色來呈現不同的元素。

Ionic 顏色類

Ionic 框架為我們提供了一組**九種預定義的顏色類**。您可以使用這些顏色，也可以使用您自己的樣式覆蓋它們。

下表顯示了 Ionic 提供的九種預設顏色集。在本教程中，我們將使用這些顏色來為不同的 Ionic 元素設定樣式。現在，您可以檢視如下所示的所有顏色 -

Ionic 為每個元素使用不同的類。例如，標題元素將具有**bar**類，按鈕將具有**button**類。為了簡化使用，我們透過在顏色名稱前新增元素類來使用不同的顏色。

例如，要建立藍色標題，我們將使用**bar-calm**，如下所示 -

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

類似地，要建立灰色按鈕，我們將使用**button-stable**類，如下所示。

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

您也可以像使用任何其他 CSS 類一樣使用 Ionic 顏色類。我們現在將使用 balanced（綠色）和 energized（黃色）顏色為兩個段落設定樣式。

<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";**

我們將把 balanced 顏色更改為深藍色，energized 顏色更改為橙色。我們上面使用的兩個段落現在是深藍色和橙色。

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

現在，如果您使用以下示例 -

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

以上程式碼將生成以下螢幕 -

所有使用這些類的 Ionic 元素都將更改為深藍色和橙色。請注意，您不需要使用 Ionic 預設顏色類。您始終可以按照您想要的方式設定元素的樣式。

安裝 SASS 後，**www/css/style.css**檔案將從 index.html 的頭部刪除。如果您仍然想使用它，則需要手動連結它。開啟 index.html，然後在頭部新增以下程式碼。

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

列印頁面