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