Ionic fab button – GUIDE + SASS Grundlagen | ion-fab

Der FABs ist unglaublich flexibel. Der Grundgedanke ist, dass die primäre Aktion in der App in der unteren rechten Ecke gut erreichbar ist:

Bei einer Shopping-App: Zum Warenkorb hinzufügen

1. ToDo App: eine ToDo hinzufügen
2. Notizen App: eine Notiz erstellen
3. Kalender App: in den Kalender einen Eintrag einfügen
4. Messaging App: eine Nachricht schreiben

Der FAB kann mehr als nur eine Funktion annehmen.

Die FAB Liste kappt sich aus, sobald der Nutzer auf den primären Button klickt. Die Aktion lässt weiter Kreisbuttons erscheinen:

1. Anlegen einer Sprach oder Textmemo?
2. Welche Art von Notiz: Text, ToDo, Audio?
3. Welche Art von Kalendereintrag will der Nutzer machen?
4. Über welchen Kanal soll die App kommunizieren?

Ionic und Cascading Style Sheets (CSS)

Bisher fokussierten sich die  vorhergehenden Tutorials auf den Ordner src/pages in dem Ionic Projekt.

Neben pages Ordner gibt es noch den src/app Ordner. Die Index-Datei app.modules.ts kennst Du als erfahren Leser meines Blogs bereits.

Die Datei app.modules.ts ist das Inhaltsverzeichnis eines Buches mit den Verweisen auf die Seiten: Angular bindet beim Builden der Ionic App die verwendeten Bibliotheken des Projekts ein.

Mehr zu Modulen in Ionic erfährst Du in der Dokumentation von Angular.

Globale (S)CSS für Ionic Apps

Für Stil-Anpassungen brauchen wir die app.scss. Ionic nutzt eigene Komponentennamen.

Diese können die globalen CSS verändern. @font-face importiert eine Schriftart und mit dem CSS Selektor für Klassen könnt Ihr Komponenten anpassen. Ein Beispiel ist die Navigationsleiste oben, die CSS mit dem Selektor .navbar anspricht.

Ein Typ Selektor kann alle Element des Typs auswählen. Alle Eingabefelder wählt der Selektor input, alle Textpassage wählt der Selektor p aus.

Tipp: Universal Sektor

Mit dem Stern * selektiert die CSS die alle Objekte auf einer Webseite. Nutze den universal Selektor, um margin, padding und Schriftart auf einen Stil zu standardisieren.

Weitere Referenzen:

• @font-face für Schriftarten verwenden
• So verwendest Du den CSS Universal Sektor
• CSS Box Modell einfach erklärt

CSS Utilities  + Variablen für schnelle Anpassungen

In Ionic gibt es noch zwei andere Optionen, um das Design schneller anzupassen. Die CSS Utilities und die SCSS Variablen sind zwei effiziente Wege Deine App etwas Farbe zu geben.

Human Interface Guidelines von AppleDie CSS Utilities sind vergleichbar mit den beschreibenden Attributen, die dem Tag des HTML Element einfügt.

• padding
• no-text-wrap
• no-margin

Das Ionic Framework ist für 3 verschiedene Design-Richtlinien ausgelegt:

1. Human Interface Guidelines (Apple)
2. Material Design (Google)
3. Univeral Windows Platform (Windows) (ist für Handys eigentlich tod)

Wenn Du den padding bei iOS auf 10px bei einem Button setzt und der Abstand wirkt auf dem iPhone gut, aber der gleiche Abstand im Material Design von Google fürchterlich aussehen.

Ionic CSS Utilities übernimmt einfache, simple Anpassungen im Design. Wenn Duspezielle Anpassungen vornehmen willst, dann musst Du das mit CSS von Hand machen.

Die Variablen für das Design beinhaltet die Datei themes/variables.scss. Ionic stellt für Android, iOS und Windows Phone verschiedene Variablen mit anderen Suffixen zur Verfügung:

• ios – (iPhone/iPad Operation System) Apples Betriebssystem
• md – (material design) – Android
• wp– (windows phone) – Windows 10 auf dem Smartphone

Im Code sieht das dann so aus:

$font-path: "../assets/fonts";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
$card-ios-header-font-size: 1.3em;

Window UWP App Design

Die HTML enthält die Struktur von des FAB-Buttons. Der Nutzer kann den Button in verschiedene Richtungen ausgeklappen und je nach Richtung gruppieren.
Die CSS Utilities lassen die App im Aussehen anders erscheinen:

1. text-nowrap  (Kein Zeilenumbruch)
2. no-margin (Kein Außenabstand)
3. text-uppercase (alles in Großbuchstaben abbilden).

Die Bilder Icons findest Du unter Ionic Framework.

Noch ein Beispiel für eine globale CSS Klasse:

Wenn Du die Komponenten effizient verändern möchtest, kannst Du auch die SASS Variablen nehmen. Das macht vieles einfacher. Die Ionic Standard-Werte überschreibst Du damit: