… wie Du Menus in Ionic hinzufügst. … wie Du Menus in Ionic konfigurierst. … was Template Referenzen in Angular sind.
Konzept: Menus in Ionic
Wie funktionieren Menus in Ionic?
Was ist der grobe Aufbau?
Diese Fragen soll der folgende Abschnitt verständlich Dir beantworten.
Das Ionic-Menu entspricht 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. Das Prinzip des Seiten-Menus kennt nur Android mit dem Material Design. In Apples Human Interface Guidelines stehen diese nicht zur Verfügung
Funktion von Ionic Menus
Das Menu im Ionic Framework ist eine DIV-Box, die Angular in seinem Seitenstapel bei Aufruf in den Vordergrund schiebt. Angular / Ionic Apps sind Single-Page-Applications, die alle Seiten auf einmal laden und je nach Wunsch des Nutzers eine Ebene nach dem anderen einblendet.
Als Eintritt- und Austritt-Animation nutzt das Menu den typischen „Slide“ von links.
Bei Apple nutzt keine Menus „an der Seite“. Apple zeigt Menus beim iPhones immer in voller Bildschirm-Breite an. Das Menus stellt eine eigene Seiteninstanz dar.
Beim iPad stellt iOS das Menu und den eigentlichen Inhalt nebeneinander dar.
Aufbau von Ionic Menus
Die Menus im Ionic Framework definiert die app.html. Diese zentrale Datei enthält die Hauptansicht. Dort befindet sich der Platz für die Split-Pane.
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 Detail-Ansicht mit der root-Referenz.
Grundlagen: Template Referenz Variablen
Ionic basiert auf Angular.
Für die Funktion des Menus setzt Ionic Template-Reference-Variablen ein:
#content verweist auf die Detail-Ansicht unserer App.
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 als 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.
Coden: Kaffee App mit Menus
TEXT
Zuerst starten wir ein Projekt mit…
ionic start coffeeSelector sidemenu
app.component.ts enthält einen Array mit allen Seiten, die im Menu stehen. Angular fügt dynamisch die einzelnen Seiten in die Liste ein. openPage() öffnet die Seite mit der Informationen aus dem Array.
Wir fügen im nächsten Schritt 2 weitere Seiten hinzu:
Als letzten Schritt erstellen wir 3 Seiten nach folgendem Schema:
Quellenangabe Bilder: Icons und SVG-Grafiken im Titelbild von Microsoft PowerPoint 2019, frei verfügbar nach EULA *) Mit dem Abonnement des Newsletters erklären Sie sich mit der Analyse des Newsletters durch individuelle Messung, Speicherung und Analyse von Öffnungsraten und der Klickraten in Profilen zu Zwecken der Gestaltung künftig besserer Newsletter einverstanden. Sie können die Einwilligung in den Empfang des Newsletters und die Messung mit Wirkung für die Zukunft widerrufen. Mehr in der Datenschutzerklärung.
![Ionic PWA Tutorial | GUIDE für Progressive Web Apps [2023]](https://lippke.li/wp-content/uploads/2018/08/Zukunft-des-Webs-PWAs-Steffen-Lippke-Ionic-Tutorial-300x169.png "Ionic PWA Tutorial | GUIDE für Progressive Web Apps [2023]")
