Damit die Toolbar in Deiner App ein Highlight wird, habe ich ein Tutorial für dieses Thema entwickelt.
Die Toolbar, das Gehirn jeder App, ermöglicht den Nutzer die Steuerung der App auf seine Art. Die Bar zeichnet sich mit Ihrer Wandelbarkeit und Möglichkeiten aus.
Starten mit etwas Ionic Code?
Unser Ziel: Besser als Google, Apple, Microsoft.
Die Toolbar ist das funktionale Herzstück jeder App. Die Zurück-Funktion, Suche und Navigation platzieren sich auf dem zentralen Steuerelement. Ionic biete Dir viele Möglichkeiten, die Toolbar nach Deinen Ideen zu gestalten.
Die Suche und der Refresher aus dem letzten Tutorial ergänzen die Toolbar, welche Funktionen zur Verfügung stellt, die Du als Grundlage für jede andere App nutzen kannst.
Technische Grundlagen – Dein Vorwissen
- Ionic Umgebung
- Listen in Ionic
Lerninhalte – Kontakte App
In diesem Tutorial lernst Du…
… eine Toolbar zu erstellen
… diese mit Icon-Buttons auszustatten
… den praktischen Refresher und die Suche hinzuzufügen
Die strukturierenden Anweisungen *ngFor und *ngIf ermöglichen Wiederholungen und Validation. Der Programmierer nutzt diese Structual Directives oft bei Listen und Menüs.
Die beschreibenden Anweisungen wie ngClass und ngStyle als Attribute von Tags verändern Komponenten im Aussehen.
Der dritte Typ von Directives erstellt eigenen Komponenten wie Buttons und Eingabefelder selbst. Ionic als Framework baut auf dem dritten Typen der Angular Directives auf. Viele Komponenten in Ionic basieren auf den Anweisungen wie z. B. ion-button oder ion-input.
Wie Angular das HTML verändert
Angular greift in den Aufbau, das Aussehen und das Verhalten der HTML-Datei ein.
Die Angular Bibliotheken ElementRef und Renderer2 ermöglichen die Veränderung der DOM. Dazu muss das HTML die Komponenten, die Angular verändern soll, markieren. Der Marker in dem HTML ist der Selektor.
„Marker der HTML“ – Die Angular Selektoren.
Der Selektor greift auf die DOM für den Angular Code zu. Das Konzept ist vergleichbar mit den ID- und class-Attribut bei der CSS. Ein bestimmtes Verhalten der Komponente definiert die Klasse, die für den Selektor geschrieben ist.
Die Macher von Ionic nutzen dieses Prinzip, um die Elemente der mobilen, hybriden App an die verschiedenen Plattformen anzupassen.
Angular stellt verschiedene Typen von Selektoren zur Entwicklung bereit:
- ion-button: Wählt einen Elementen-Namen innerhalb eines Tags aus.
- .class: Sucht nach der class-Deklaration von Tags
- :not(sub_selector): nur die Auswahl, wenn es nicht ist
- [attribute]: Selektiert das Attribut, welches in den Klammern steht
- [input=radio]: Wie davor, nur, dass auch noch der Wert (z. B. Type) übereinstimmen muss
- selector1, selector2: Entweder 1. Selektor oder 2. Selektor
Ionic Toolbar und Selektoren
Die Toolbar in Ionic gehört zu der dritten Kategorie der Directives.
Die Anweisung ion-toolbar generiert oben die Navigationsleiste oben. Die Buttons der Toolbar fügen sich mit den Attributen end und start an die Toolbar an.
Zusätzlich kannst Du in Ionic in varibales.css über die CSS- und den SCSS-Zugriff die Toolbar in ihrem Aussehen verändern, um sie an Dein Design anzupassen.
Die Toolbar steht im Header der home.html. Die Farbe der Toolbar bestimmt das Attribut color wie die NavBar. Mit der von Ionic vordefinierten, reduzierten Farbpalette in variables.css geht das Stylen einfach.
Typisch für den begrenzten Platz in der Toolbar sind die Ionic Icons. Anstatt Text zunehmen, empfehlen Google und Apple Symbole zu verwenden: Die kleinen Bildchen versteht fast jeder sofort und die Bar wirkt aufgeräumter.
Die Ionic Segmente sind eine Gruppe von Buttons, die eine inhaltlich engen Zusammenhang haben. Gute Use-Cases für Segmente sind die Auswahl eines Tages, eines Projekts oder jegliche andere sinnvolle Gruppierung, die einen separaten Screen gebrauchen kann.
Die Searchbar und der Refresher ist aus einem vorhergehenden Tutorial bekannt. Diese sind häufig Teil der Toolbar. Für lange Listen und schnell aktualisierenden Inhalten in Deiner App sind Refresher und Suche ein absolutes Muss.
Beachte aber, dass Du den Code direkt in die Toolbar einfügst und nicht unterhalb des Headers!
