Menu in Ionic – einfach erklärt

Bessere Nav in Ionic Steffen Lippke Ionic Tutorial

Menus sind aus unser heutigen Webseiten und Apps nicht wegzudenken.

Jede App braucht verschiedene Menus, um den Nutzer eine Orientierung zugegeben.

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

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 lichtscheuen Programmiere im Keller:

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

Wir bauen eine Kaffee-Konfigurator-App, sowie sie jeder Programmierer lieben würde.

 

 

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.

Kostenlose Exlusive
Coding + Hacking Tutorials

Melde Dich an ▶ erhalte Zugang
zu Ionic / Hacking Tutorials

 

 

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 sind diese nicht angedacht.

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 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 eigene 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 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 Detailansicht mit der 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 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.

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 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:

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:

Kostenlose Exlusive
Coding + Hacking Tutorials

Melde Dich an ▶ erhalte Zugang
zu Ionic / Hacking Tutorials

Ob Kandis, Würfelzucker oder Rieselzucker jeder mag seinen Kaffee-Süße anders.

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

Erweitere den Code mit einer 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.

Schaue Dir doch mal des Tutorial zu Split Pane an. Dort kannst Du viel über weitere Menuarten erfahren.

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

Schreibe einen Kommentar

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