ion-split-pane Tutorial | 6-Schritte Ionic Split Pane

Das Smartphone und Tablet unterscheidet sich nicht wesentlich. Das Tablet kann nur zwei Screens parallel darstellen. Der zweite Screen (Detail), welche den höheren Informationsgehalt besitzt, sitzt auf der rechten Seite.

Darstellung auf dem Smartphone

Beim Smartphone haben wir nur eine kleine Fläche, welche die Meisten primär hochkant nutzen. Der kleinere Screen muss die Informationen der Detail-Ansicht gestapelt anzeigen …

• Die Breite der Bilder wächst auf Bildschirmbreite
• Textblöcke, die nebeneinander stehen, zeigt das Smartphone untereinander an
• Buttons und Links müssen nun auch für Wurstfinger geeignet sein
• Die Webseite muss Text ausreichend groß anzeigen.

  

Master-Detail, so wie es sein sollte

Im Idealfall ist die Masteransicht scrollbar und mit einer Vielzahl an Elementen gefüllt, während der Detail-View statisch bleibt. Die zentralen Informationen stellt der Detail-View dar.

Die Detail-Ansicht kann die App einfach erweitern: Mit einigen Buttons und Modals kann der Detail-View mehr Informationen zur Verfügung stellen.

• Öffnungszeiten zeigt die App in eine Pop-Up an
• Diverse Links zu den Webseiten sind erreichbar
• Buttons zu Editiere / Änderungsmenü

  

Diese sollte möglichst als Modal, einer Extraansicht, aufpoppen. Zu Modal Thema habe ich schon eine Tutorial erstellt. Wenn Ihr Euren Master-Detail View fertiggestellt habt, könnt Ihr die App mit Modals erweitern.

Ionic erstellt Apps auf einer Web-Basis. Wegen der Webtechnologien nutzt das Framework den sogenannten Meta-Tag Viewport. Dieser ist standardmäßig in der index.html beinhaltet, welche der Inital Terminalbefehl beim Projekt-Aufsetzung generiert.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Das Statement stellt die Breite der App auf die Gerätebreite ein und annulliert den Zoom.

Mehr mir Media-Queries

Die nächsten wichtigen HTML-Befehle sind die Media-Queries. Diese können Geräte und Auflösung spezifische Styles in einer CSS Datei bündeln. Sie setzen sogenannte Breakpoints fest, welche die unterschiedliche CSS bei denen die Änderung des Displays aktivieren.

@media only screen and (min-width: 700px) {...}

Bei einer Displaygröße von 700px mindestens nutzt die CSS alles Styles, die innerhalb der geschweiften Klammern stehen. Mehreren, verschiedene Media-Queries untergliedern die CSS für die verschiedene Displaygrößengruppen.

Trenne die CSS für bessere Übersicht

Deine Unterteilung soll so einfach wie für die App gestaltet sein:

Ein Smartphone Ansicht mit CSS und eine Tablet / Desktopansicht mit CSS. Des Weiteren können Media-Queries die Rotation des Displays erkennen und durch das Wissen die Website angepasst darstellen:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Zuerst definierten wir die Untergliederung in Master- und Detail-Ansicht. Dabei setzt Ionic standardmäßig die Untergliederung auf 30 % Master / 70 % Detail Ansicht.

Starten mit den Basics

In die app.html kommen ein paar Zeilen Code hinzu:

Noch etwas CSS für bessere / andere Items:

Detail View erstellen

Der Code dafür befindet sich in app.html. Der Master definieren die Tags ion-menu und das Attribut [content]=“content“. Die Detail-Ansicht ist festgelegt mit ion-nav root main content.

Der Viewport findet Anwendung im Split-Pane Tag. Ionic bietet zusätzlich noch Abkürzungen zu den bekanntesten Gerätebreiten an:

xs sm, md, lg, xl

Etwas Logik in die .ts Datei einfügen

Home.ts spezifiziert die Detail-Ansicht.

Die Datei enthält die Switch-Anweisung, die alle Titel, Texte und Bilder-Urls ansteuert, die der Detail-Ansicht anzeigen soll. Das HTML zeigt diese mit den doppelten geschweiften Klammern an.

Sobald der Nutzer auf einen Eintrag in der Masteransicht klickt, überträgt die App einen Parameter vom Master zum Detail. Dieser lässt die gewünschten Informationen anzeigen.