Menu in Ionic – einfach erklärt

Inhalt - Weg zum Kaffee - Wähler

Das Menu entspricht in Ionic einer normalen Ionic Seite. Diese enthält einen eignen Toolbar, sowie eine Liste. Die Liste enthält die Menu Elemente, die anwählbar sind.

Beim Ausklappen des Menus schiebt die App die neue Ionic Seite als Menu nur zu einem kleinen Teil über den Bildschirm.

Funktion von Ionic Menus

Das Menu im Ionic Framework basiert auf einer Seite, die Angular in seinem Seitenstapel bei Aufruf in den Vordergrund schiebt. Als Eintritt- und Austrittanimation nutzt das Menu den typischen Slide von links.

Die Seiten Menus sind gut bekannt aus dem Android Material Design. Bei Apple sind keine Menus „an der Seite“ nicht so vorhanden. Diese Menus zeigt der Bildschirm des iPhones immer in voller Breite an. Das Menus stellt eine eigne Seiteninstanz dar.

Beim iPad stellt iOS das Menu und den eigentlichen Inhalt nebeneinander da.

Aufbau von Ionic Menus

Die Menus im Ionic Framework definiert die app.html. Diese zentrale Datei enthält die Hauptansicht. Dort befindet sich auch der Platz für die Splitpane.

Ion-menu kennzeichnet das Menu in der HTML Seite. Innerhalb des Tags folgen Toolbar und die Liste mit Einträgen, die auswählbar sind. Außerhalb des ion-menu Tags ist die Detailansicht mit dem root-Referenz.

Diese Variable zeigt auf ein Element der DOM (Data Object Model). Wenn Angular den Wert eines Eingabefeldes benötigt, dann deklariert der Programmierer das Eingabefeld mit eine #eingabe . Der Zugriff erfolgt durch z.B. einen Funktionsaufruf über eingabe.value.

Die Template Reference Variable kann überall im Code stehen. Diese stellt einen Anker, ein Hyperlink auf das referenzierte Element dar.

Diese Variable mit # darf nicht mit den Variabel let eingabe vertauscht werden.

Bei Strukturierenden Anweisungen, einem *ngFor, nutzt Angular let eingabe zur Iteration. *ngFor füllt eine Struktur (z. B. eine Liste oder Karte) mit Strings und andere Objekte.

Zuerst starten wir ein Projekt mit...

ionic start coffeeSelector sidemenu

app.component.ts enthalt eine Array mit allen Seiten, die im Menu stehen. Angular fügt dynamisch die einzelnen Seite in die Liste ein. openPage() öffnet die Seite mit dem Informationen aus dem Array.

Wir fügen 2 Seiten hinzu:

Als letzten Schritt erstellen wir 3 Seiten nach folgendem Schema: