framework7教程

Framework7 颜色主题

说明

Framework7 为您的应用程序提供了不同的颜色主题。
颜色主题提供了不同类型的主题颜色,用于与下表中指定的应用程序顺利配合-
S.No 主题类型和描述
1 iOS 主题颜色
您可以为应用程序使用 10 种不同的默认 iOS 颜色主题。
2 材质主题颜色
Framework7 为应用程序提供了 22 种不同的默认材质颜色主题。

应用颜色主题

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>

布局主题

您可以通过使用 whitedark 两个主题为您的应用程序使用默认布局主题。可以通过使用 layout-[theme] 类到父元素来应用主题。

示例

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

助手类

Framework7 提供了额外的辅助类,可以在下面列出的主题之外或没有主题的情况下使用-
color-[color]-可用于更改块的文本颜色或按钮、链接、图标等的颜色。 bg-[color]-它在块或元素上设置预定义的背景颜色。 border-[color]-它在块或元素上设置预定义的边框颜色。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4