Framework7 - 顏色主題

描述

Framework7 為您的應用程式提供不同的顏色主題。

顏色主題提供了不同型別的主題顏色，用於在應用程式中平滑工作，如下表所示：

應用顏色主題

Framework7 允許您透過使用 theme-[color] 類應用於父元素，從而在不同的元素（如頁面、列表塊、導航欄、按鈕行等）上應用顏色主題。

示例

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

佈局主題

您可以透過使用兩個主題 white 和 dark 為您的應用程式使用預設佈局主題。這些主題可以透過使用 layout-[theme] 類應用於父元素來應用。

示例

   ...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

輔助類

Framework7 提供了額外的輔助類，可以在主題內外或沒有主題的情況下使用，如下所示：

• color-[color] - 它可以用來更改塊的文字顏色或按鈕、連結、圖示等的顏色。

• bg-[color] - 它在塊或元素上設定預定義的背景顏色。

• border-[color] - 它在塊或元素上設定預定義的邊框顏色。