Framework7 - Farbthemen

Beschreibung

Framework7 bietet verschiedene Farbthemen für Ihre Anwendungen.

Ein Farbthema bietet verschiedene Arten von Themenfarben, die für die reibungslose Arbeit mit den Anwendungen verwendet werden, wie in der folgenden Tabelle angegeben.

S.No. Thementyp & Beschreibung
1 iOS-Themenfarben

Sie können 10 verschiedene Standard-iOS-Farbthemen für die Anwendung verwenden.

2 Materialthema Farben

Framework7 bietet 22 verschiedene Standardfarben für Materialfarben für die Anwendung.

Anwenden von Farbthemen

Mit Framework7 können Sie Farbthemen auf verschiedene Elemente wie Seite, Listenblock, Navigationsleiste, Schaltflächenzeile usw. anwenden, indem Sie die Klasse theme- [color] auf das übergeordnete Element anwenden .

Beispiel

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

Sie können das Standardlayout-Design für Ihre Anwendung verwenden, indem Sie zwei Themen verwenden: Weiß und Dunkel . Die Themen können mithilfe der Klasse layout- [theme] auf das übergeordnete Element angewendet werden .

Beispiel

...
</body>

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

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

Helferklassen

Framework7 bietet zusätzliche Hilfsklassen, die außerhalb oder ohne Themen verwendet werden können, wie unten aufgeführt -

  • color-[color] - Es kann verwendet werden, um die Textfarbe des Blocks oder die Farbe der Schaltfläche, des Links, des Symbols usw. zu ändern.

  • bg-[color] - Legt die vordefinierte Hintergrundfarbe für den Block oder das Element fest.

  • border-[color] - Legt die vordefinierte Rahmenfarbe für den Block oder das Element fest.