Menu in Ionic – einfach erklärt

Bessere Nav in Ionic Steffen Lippke Ionic Tutorial

Menus sind seit Beginn des Computerzeitalters unvermeidlich.

Jede App braucht verschiedene Menus, um den Nutzer die Wahl zu gegeben.

Diese Tutorial zeigt Dir, wie Du Menus in Deine Ionic App codest.

Inhalt - Weg zum Kaffee - Wähler

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Kaffee-Konfigurator-App

Herausforderung und Ziel
Herausforderung und Ziel

Die zwei goldenen Regeln zu der Versorgung von den licht scheuen Gestalten im Keller:

  1. Jeder Programmierer liebt Kaffee.
  2. Wenn er / sie kein Kaffee liebt, ist er / sie kein Programmierer.

 

 

Unser Ziel: Mehr KAFFEE

Die Kaffee-Konfigurator-App soll die Bestellung eines Kaffees digitalisieren. Die vielfältigen Mischungen für den eigenen perfekten Kaffee verlangen nach einer ausgeklügelten Struktur mit Menus.

Die App soll zwei Menus und eine Detail-Ansicht erhalten. Diesem Beispiel macht deutlich, wie Du Menus in Ionic am besten benutzen kannst.

Kaffee Wähler Ionic Menu einfach erklärt
Kaffee Wähler Ionic Menu einfach erklärt

 

Technische Grundlagen - Dein Vorwissen

Lerninhalte

In diesen Tutorial erfährst Du…

… wie Du Menus in Ionic hinzufügst.
... wie Du Menus in Ionic konfigurierst.
… was Template Referenzen in Angular sind.

 

2. Kapitel

Konzept: Menus in Ionic

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Wie funktionieren Menus in Ionic?

Was ist der grobe Aufbau?

Diese Fragen soll der folgende Abschnitt verständlich Dir beantworten.

 

 

11 Kostenlose Exklusive App Dev Tipps

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

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.

3. Kapitel

Grundlagen: Template Reference Variablen

Theorie einfach erklärt
Grundlagen einfach erklärt

Ionic basiert auf Angular.

Für die Funktion des Menus setzt Ionic Template Reference Variablen ein: #content für die Detailansicht 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, 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.

4. Kapitel

Coden: Kaffee App mit Menus

Coding und Umsetzung
Coding zur Umsetzung

TEXT

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.

11 Kostenlose Exklusive App Dev Tipps

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

Wir fügen 2 Seiten hinzu:

Als letzten Schritt erstellen wir 3 Seiten nach folgendem Schema:

Ionic Menu Toggle ist oben links
Ionic Menu Toggle ist oben links

5. Kapitel

Erweiterungen: Alles gut sind 3

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Füge noch eine drittes Menu hinzu: Die Bezuckerung unseres Getränks soll auch sichergestellt sein:

Ob Kandis, Würfelzucker oder Rieselzucker jeder mag seinen Kaffee anders.

Weil dieses Menu optional ist, platziere es auf der rechten Seite.

Hier kannst Du da Attribut für die Positionierung des Ionic Menus testen. Erweitere den Code mit eine weiteren Switch-Case, um den Code zu erweitern.

Auf der Detailansicht musst Du noch ein weiteres Feld schaffen, um den Status für die Zuckermenge anzuzeigen.

6. Kapitel

Fazit: Kaffee für jeden Keller

Ziel und Fazit
Ziel und Fazit

Neben viel Kaffee, hast Du auch viel von Ionic Menus gelernt.

Ich freue mich auf Deine Fragen, Anregungen und Kritik in den Kommentaren!

 

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 (3 votes, average: 4,33 out of 5)
Loading...

Schreibe einen Kommentar

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