ngStyle, ngClass, SCSS – Dynamische Styles in Ionic

Dynamisch CSS Anpasen Ionic Beginner Tutorial Steffen Lippke

Gefallen Dir die CSS (Styles) von Webseiten von 1995?

Nein? Dann solltest Du auch Deine Apps mit dynamischen CSS erweitern.

Ich zeige Dir, wie Du eine ansprechende App durch dynamisch generierte CSS mit ngStyle, ngClass und SCSS erschaffst.

Bereit?

Inhalt - Weg zu Deinem Design

Herausforderung und Ziel

Coding und Umsetzung

Konzept und Lösungsansatz

Erweiterungen und Weiterführendes

Grundlagen einfach erklärt

Ziel und Fazit

1. Kapitel

Herausforderung & Ziel: Theme-Design in App einstellen können

Herausforderung und Ziel
Herausforderung und Ziel

Wäre es nicht spannend, wenn Du Deine App in den Einstellungen direkt im Design anpassen könntest?

Wäre es nicht interessant, wenn der Nutzer seine App personalisieren und anpassen kann?

Wäre es nicht gut, wenn Du Deine App mit CSS etwas flexibler gestalten könntest?

 

 

Unser Ziel: Gestalte Deine App mit CSS

Angepasster Home Screen 2 mit ngStyle
Angepasster Home Screen 2 mit ngStyle

Technische Grundlagen - Dein Vorwissen

Lerninhalte für Ionic Tutorial

In diesem Tutorial lernst Du alles darüber, wie Du Deine App dynamisch mit Stylesheets anpassen kannst.

In diesem Tutorial lernst Du...

  • … was CSS und SCSS ist
  • … wie man mit ngStyle von Angular arbeitest
  • … wie Du mit Ionic schnell designen kannst
  • … wie Du in der App das Thema ändern kannst

 

2. Kapitel

Konzept & Lösungsansatz: Mit ngStyle, ngClass und SCSS zum Ziel

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Im Hintergrund von Ionic läuft Angular.

Deshalb kommen Style-Möglichkeiten zum Einsatz, die Angular fördert und anbietet.

Mit z. B. einem Klick auf den Button sollen sich die CSS Anweisungen in Inhalt und Form ändern.

 

 

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Neue Wege mit Angular

Diese Idee können wir in Ionic am besten mit ngStyle umsetzen, da mit ngStyle in TypeScript Variablen direkt abrufen können. Die HTML und CSS ist normalerweise statisch. Aber durch die TypeScript Datei können wir die CSS verändern, ähnliche wie bei JavaScript mit der DOM.

Mit ngStyle fügst Du einem HTML Element CSS hinzu, sodass Du dieses anpassen kannst. Mit ngClass bindest Du eine Klasse and die Komponente an.

Wieso SCSS und nicht CSS?

Was aber ist der Unterschiede von SCSS und CSS? Und für was brauche ich es? SCSS ist die Verbesserung von CSS und kannst Du dynamischer benutzen. In den Grundlagen habe ich ein Beispiel hinzugefügt.

3. Kapitel

Grundlagen: Wie CSS auch dynamisch geht

Theorie einfach erklärt
Grundlagen einfach erklärt

Wie funktioniert ngStyle, ngClass und SCSS?

Hier lernst Du die Grundlagen, wie Du mit Ionic und Angular Deine App dynamisch mit Aussehen verändern kannst.

 

ngStyle – Dynamsiche Style Zuweisung

In Angular wollen wir mit den Anweisungen (Direktive) ngStyle und ngClass die App designen. Dazu können wir gleich Code in die HTML Datei schreiben und diese in den Tag der Objekte anfügen.

<p [ngStyle]="getStyles()">
Text wird gestylt
</p>

Und in der TypeScript Datei kannst Du dann Deine Styles als Rückgabewert der Funktion definieren:

getStyles(){
let typeScriptStyle = {
‘color’: ‘blue’,
‘font-size’:’30px’
}
return typeScriptStyles;

}

Mit Angular kannst Du auch direkt die einzelnen CSS Anweisungen ansprechen:

[style.font-size.px]="21"

Oder mit TypeScript Variable, die Du dynamisch durch Funktionen anpassen und modifizieren kannst

[style.font-size.px]="dynamicFontSize"

Statt px kannst Du auch .em oder .% schreiben. Das gleiche Schema gilt für alle Styles in CSS. Diese kannst Du über [style. ansprechen.

ngClass – Komapaktes ngStyle

Mit ngClass kannst Du ganze Style Blocke deiner CSS austauschen. TypeScript kann die Styles über den Indentifer je nach Bedingung auswechseln.

<li [ngClass]="{
'text-adult:person.age >=18,
'text-child:person.age < 18,
}">{{ person.name }} im Alter von ({{ person.age }})
</li>

SCSS – Noch besser und effizient kreativ werden

SCSS ist die Weiterentwicklung von den Cascading Stylesheets (CSS), die es dem Programmierer ermöglichen, Variablen festzulegen.

In den Variablen kann der Programmierer Abschnitte des Codes z. B. ein wiederkehrender RGB-Farbcodes oder auch Längenangaben festgelegt werden.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Das vermeidet doppelten Code und Änderungen gehen deutlich schneller.

$background-color: #ffeeaa;
$width: 560px;

@mixin body{
width: $width;
background-color: $color;

content{
width: $width;
color:$color;
}
}

4. Kapitel

Coden: Personalisiere (D)eine App

Coding und Umsetzung
Coding und Umsetzung

… unserem 1. Tutorial über die Grundlagen zu Ionic.

Wenn Dir Du schon alles zu Ionic kennst, starte mit dem Terminal Befehl unten:

Ionic start colorMe tabs

Cd colorMe

Und füge eine Seite hinzu

Ionic g page settings

Denke daran es auch die Seite in die app.module.ts in declarations und entryComponents hinzufügen.

import { SettingsPage } from "../pages/settings/settings";

Grundlage zum Gestalten – Home Page

In der home.html definieren wir ein paar Texte, eine einfache Überschrift und einen runden Button. Diese Komponente passt das folgende TypeScript an.

In die HTML schreiben wir in die Tags  direkt die [style. Attribute, um auf die CSS zuzugreifen.

Der Button öffnet mit der Ein-Weg-Anweisung (click) die Einstellungsseite.

Die Ionic-Anweisungen full und round verändern stilistisch den Default-Button. Das Framework bietet fertigen Code, der automatisch den Button so gestaltet. Die Styles adaptiert der Ionic Code für Ios, Android und Windows Phone.

In home.ts legst Du Variablen für die Design-Einstellungen an. Diese verknüpfst Du mit dem ngModel als Zwei-Weg-Bindung , ein Art Brücke zwischen HTML und TypeScript.

Der Konstruktor beinhaltet die Anweisung zum Empfang der Übergabeparameter von der Einstellungsseite.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Bunte Home Page
Bunte Home Page

Jetzt wird’s flexibel – Settings Page

In settings.html definierst Du für die Labels spezielle CSS IDs. Die IDs sprechen wir SCSS die HTML Komponenten an.

Angepasster Home Screen 1
Angepasster Home Screen 1

Der Tag <ion-range> stellt den Schieberegler dar. Für den Schieber kannst Du einen minimal und maximal Wert festlegen. Das geht mit der Erweiterung durch die Tags min und max. Beschriften kannst Du den Schieberegler durch spezielle Labels, die mit den range-left / range-right gekennzeichnet sind.

Jetzt noch etwas SCSS.

Hier habe ich noch als Exempel eine globale Farbe und Schriftart angelegt. Diese codest Du außerhalb der page-settings{} Klammer.

In der zugehörigen TypeScript Datei sehen wir wieder die ngModels.

In der Funktion openHomePage() wandelst Du mit einer if-Anweisung noch den boolean headlineColor in einen Farb-String um.

Mit den Aufruf der Home Seite geben wir über eine Array, die drei Variablen mit.

Settings Page mit Globalen Variablen
Settings Page mit Globalen Variablen

 

5. Kapitel

Erweiterungen: Noch mehr Stil für Deine App

Erweiterungen und Weiterführendes
Erweiterungen und Weiterführendes

Nachdem Tutorail beherrschst Du die Grundlagen von Angulars Styling.

Nutzes es für andere Aufgaben.

Verwende es für Deine nächsten Apps, die Du baust.

Ein paar Anregungen...

  • Bauen eine kompletes Dark Theme Design unter Beachtung aller Komponenten. Nutze hier zu eine ngClass Anweisung und nutze die IDs und Classes in der SCSS
  • Probiere Dich an einer ausklappbaren Div-Box. Diese wird häufig bei FAQ oder anderen erweiterten Einstellungen als Komponente verwendet.
  • Graue den Button zum Absenden aus: Wenn Du eine Formular ausfüllst, darf der Button erst anklickbar sein und "so aussehen", wenn das Formular korrekt ausgefüllt worden ist.

6. Kapitel

Fazit: Dein Zertifikat für's Angular Stylen

Ziel und Fazit
Ziel und Fazit

Danke, dass Du das Tutorial durchgearbeitet hast.

Du hast sicherlich davon profitiert.

Schreibe man in die Kommentare, was für Ideen Du JETZT mit ngStyle, ngClass und SCSS umsetzen kannst...

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 4,50 out of 5)
Loading...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.