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>

布局主题

您可以使用两个主题白色和深色为您的应用程序使用默认布局主题。可以使用layout-[theme]类将主题应用于父元素。

示例

   ...
</body>

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

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

辅助类

Framework7 提供了额外的辅助类，可以在主题之外使用，如下所示 −

• color-[color] − 它可用于更改块的文本颜色或按钮、链接、图标等的颜色。

• bg-[color] − 它设置块或元素上的预定义背景颜色。

• border-[color] − 它设置块或元素上的预定义边框颜色。