Ionisch - Farben

Bevor wir mit den tatsächlichen Elementen beginnen, die im Ionic-Framework verfügbar sind, lassen Sie uns ein wenig verstehen, wie Ionic Farben für verschiedene Elemente verwendet.

Ionische Farbklassen

Das ionische Gerüst gibt uns eine Reihe von nine predefined color classes. Sie können diese Farben verwenden oder sie mit Ihrem eigenen Stil überschreiben.

Die folgende Tabelle zeigt den Standardsatz von neun von Ionic bereitgestellten Farben. In diesem Tutorial werden wir diese Farben zum Stylen verschiedener ionischer Elemente verwenden. Im Moment können Sie alle Farben wie unten gezeigt überprüfen -

Klasse	Beschreibung	Ergebnis
Licht	Zur Verwendung für weiße Farbe
stabil	Zur Verwendung für hellgraue Farbe
positiv	Für blaue Farbe zu verwenden
Ruhe	Zur Verwendung für hellblaue Farbe
ausgewogen	Zur Verwendung für grüne Farbe
erregt	Zur Verwendung für gelbe Farbe
durchsetzungsfähig	Für rote Farbe zu verwenden
königlich	Zur Verwendung für violette Farben
dunkel	Zur Verwendung für schwarze Farbe

Verwendung ionischer Farben

Ionic verwendet für jedes Element unterschiedliche Klassen. Zum Beispiel wird ein Header-Element habenbar Klasse und ein Knopf haben eine buttonKlasse. Um die Verwendung zu vereinfachen, verwenden wir verschiedene Farben, indem wir der Elementklasse einen Farbnamen voranstellen.

Um beispielsweise einen blauen Farbheader zu erstellen, verwenden wir a bar-calm wie folgt -

<div class = "bar bar-header bar-calm">
   ...
</div>

Um eine graue Farbschaltfläche zu erstellen, verwenden wir diese ebenfalls button-stable Klasse wie folgt.

<div class = "button button-stable">
   ...
</div>

Sie können die ionische Farbklasse auch wie jede andere CSS-Klasse verwenden. Wir werden nun zwei Absätze mit einer ausgewogenen (grün) und einer energiegeladenen (gelb) Farbe gestalten.

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

Der obige Code erzeugt den folgenden Bildschirm:

Wir werden in den folgenden Kapiteln ausführlich darauf eingehen, wenn wir verschiedene Elemente mit verschiedenen Klassen erstellen.

Anpassen von Farben mit CSS

Wenn Sie einige der ionischen Standardfarben mithilfe von CSS ändern möchten, können Sie dies tun, indem Sie die bearbeiten lib/css/ionic.cssDatei. In einigen Fällen ist dieser Ansatz nicht sehr produktiv, da jedes Element (Kopfzeile, Schaltfläche, Fußzeile ...) seine eigenen Klassen für das Styling verwendet.

Wenn Sie daher die Farbe der Klasse "hell" in orange ändern möchten, müssen Sie alle Elemente durchsuchen, die diese Klasse verwenden, und sie ändern. Dies ist nützlich, wenn Sie die Farbe eines einzelnen Elements ändern möchten, aber nicht sehr praktisch, um die Farbe aller Elemente zu ändern, da dies zu viel Zeit in Anspruch nehmen würde.

Anpassen von Farben mit SASS

SASS (das ist die Kurzform von - Syntactically Awesome Style Sheet) bietet eine einfachere Möglichkeit, die Farbe für alle Elemente gleichzeitig zu ändern. Wenn Sie SASS verwenden möchten, öffnen Sie Ihr Projekt im Befehlsfenster und geben Sie - ein

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

Dadurch wird SASS für Ihr Projekt eingerichtet. Jetzt können Sie die Standardfarben ändern, indem Sie die öffnenscss/ionic.app.scss Datei und geben Sie dann den folgenden Code vor dieser Zeile ein - @import "www/lib/ionic/scss/ionic";

Wir werden die ausgeglichene Farbe in dunkelblau und die aktivierte Farbe in orange ändern. Die beiden oben verwendeten Absätze sind jetzt dunkelblau und orange.

$balanced: #000066 !default;
$energized: #FFA500 !default;

Wenn Sie nun das folgende Beispiel verwenden:

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

Der obige Code erzeugt den folgenden Bildschirm:

Alle ionischen Elemente, die diese Klassen verwenden, ändern sich in dunkelblau und orange. Beachten Sie, dass Sie keine ionischen Standardfarbklassen verwenden müssen. Sie können Elemente immer so gestalten, wie Sie möchten.

Wichtige Notiz

Das www/css/style.cssDie Datei wird nach der Installation von SASS aus dem Header der Datei index.html entfernt. Sie müssen es manuell verknüpfen, wenn Sie es weiterhin verwenden möchten. Öffnen Sie index.html und fügen Sie den folgenden Code in den Header ein.

<link href = "css/style.css" rel = "stylesheet">