Framework7 - Temas de color

Descripción

Framework7 proporciona diferentes temas de color para sus aplicaciones.

Un tema de color proporciona diferentes tipos de colores de tema que se utilizan para trabajar con las aplicaciones sin problemas, como se especifica en la siguiente tabla:

S. No Tipo de tema y descripción
1 Colores del tema de iOS

Puede usar 10 temas de color de iOS predeterminados diferentes para la aplicación.

2 Colores del tema del material

Framework7 proporciona 22 temas de color de material predeterminados diferentes para la aplicación.

Aplicación de temas de color

Framework7 le permite aplicar temas de color en diferentes elementos como página, bloque de lista, barra de navegación, fila de botones, etc. utilizando la clase theme- [color] para el elemento principal.

Ejemplo

...
</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>

Temas de diseño

Puede usar el tema de diseño predeterminado para su aplicación usando dos temas blanco y oscuro . Los temas se pueden aplicar usando la clase layout- [theme] al elemento padre.

Ejemplo

...
</body>

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

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

Clases de ayudantes

Framework7 proporciona clases de ayuda adicionales, que se pueden usar fuera o sin los temas que se enumeran a continuación:

  • color-[color] - Se puede utilizar para cambiar el color del texto del bloque o el color del botón, enlace, icono, etc.

  • bg-[color] - Establece el color de fondo predefinido en el bloque o elemento.

  • border-[color] - Establece el color de borde predefinido en el bloque o elemento.