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