Framework7 - 颜色主题

描述

Framework7 为您的应用程序提供不同的颜色主题。

颜色主题提供不同类型的主题颜色,用于与应用程序顺利配合使用,如下表所示 −

S.No 主题类型 &描述
1 iOS 主题颜色

您可以为应用程序使用 10 种不同的默认 iOS 颜色主题。

2 Material 主题颜色

Framework7 为应用程序提供了 22 种不同的默认 Material 颜色主题。

应用颜色主题

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] − 它设置块或元素上的预定义边框颜色。