zurück zum Artikel

Mobile-Entwicklung: Ionic 6 nimmt Änderungen am iOS- und Android-Design vor

Madeleine Domogalla

(Bild: lisyl/Shutterstock.com)

Neben den Design-Änderungen hält die sechste Hauptversion des Mobile-App-Frameworks eine Vielzahl an Neuerungen für seine Komponenten bereit.

Version 6.0.0 des quelloffenen Mobile-App-Frameworks Ionic liegt vor. Die sechste Major Version hält einige wenige Änderungen bereit, die mit der Abwärtskompatibilität brechen. Zudem stehen Entwicklerinnen und Entwicklern ein überarbeiteter Desktop-Support sowie Änderungen am Design für iOS und Android zur Verfügung. Das Ionic-Entwicklerteam führt mit der aktuellen Version Neuerungen für eine große Anzahl an Komponenten ein.

Das Team hinter dem Open-Source-Framework möchte künftig den Release-Zyklus an die Veröffentlichung neuer iOS- und Android-Versionen anpassen. In Zukunft soll es jährlich eine Ionic-Hauptversion geben.

Änderungen am Design für iOS und Android

Für iOS [1] hält Ionic 6 Änderungen am Design bereit. Neben einem neuen Stil für das Neuladen einer Seite (Refresh) hat das Ionic-Team die Symbolleisten und den Stil für den Dark Mode überarbeitet. Zudem bietet das Update die neue Option collapse sowohl für ion-header als auch ion-footer, womit sich die Hintergründe der Kopf- und Fußzeilen so lange ausblenden lassen, bis Nutzer mit dem Scrollen beginnen. Der Blog-Beitrag [2] bietet Beispielcode zur Veranschaulichung:

<ion-header translucent="true" collapse="fade">
  <ion-toolbar>
    <ion-title>Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  ...
</ion-content>

<ion-footer translucent="true" collapse="fade">
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Auch für Android gibt es Neuerungen hinsichtlich des Designs. Beispielsweise hat das Ionic-Entwicklerteam den Input-Stil im Material Design Mode überarbeitet, um auch die neuen Varianten filled und outline zu unterstützen. Neue Slots für Fehler- und Hilfstexte sollen den Zeichenzähler unterstützen. Außerdem aktualisiert Version 6 des Frameworks ion-select, um die neuesten Material-Design-Stile mit dem Popover-Interface zu verwenden.

Ionic 6 führt neue Komponenten ein, darunter eine neue Button-Sheet-Funktion. Es handelt sich dabei um einen Teil von ion-modal, mit dem sich dynamische Sheets erstellen lassen, die an festgelegten Punkten einrasten [3] und sich als Overlay über interaktive Inhalte legen.

Die Komponente ion-datetime ist ebenfalls vom Update betroffen. Das Entwicklerteam hat die Komponente überarbeitet, sodass sie nun die neuen Kalender-Picker-Stile von iOS und Android nutzen kann. Überdies verbessert das Update die Funktionsweise auf Desktop-Endgeräten mit vollständiger Tastatur- und Screenreader-Integration. ion-datetime weiß ab sofort mit Sprach- und regionalen Einstellungen umzugehen.

Neben den genannten Komponenten bietet das Update weitere Änderungen für ion-select, ion-modal, ion-popover und viele andere. Nähere Details finden sich im Beitrag auf dem offiziellen Blog des Ionic Frameworks [4].

(mdo [5])

URL dieses Artikels:
https://www.heise.de/-6294242

Links in diesem Artikel:
[1] https://www.heise.de/thema/iOS
[2] https://ionicframework.com/blog/announcing-ionic-6/
[3] https://ionicframework.com/blog/wp-content/uploads/2021/12/bottomsheet.mov
[4] https://ionicframework.com/blog/announcing-ionic-6/
[5] mailto:mdo@ix.de

Copyright © 2021 Heise Medien