JavaScript

Cross-Platform Framework für mobile Apps

Ionic 4.1: Neue Features für Skeleton Screens und Checkboxen
Keine Kommentare

Ionic 4.1 bringt weitere Funktionen für Skeleton-Texte und einen neuen Zustand für Checkboxen. Zum Verstecken von Elementen wurden ebenfalls neue Möglichkeiten geschaffen.

Das Cross-Platform-Framework Ionic hat das erste Feature-Update nach dem Release von Ionic 4 vorgelegt. Zu den neuen Features in Ionic 4.1 „Hydrogen“ gehören zusätzliche Möglichkeiten für Skeleton Screens, ein weiterer Zustand für Checkboxen und mehr CSS-Display-Utilities.

Skeleton Screens in Ionic 4.1

Bis eine Webseite oder -anwendung vollständig geladen ist, kommen meist Ladebalken oder Fortschrittsuhren zum Einsatz. Der Nachteil: User können so lange nicht mit der Seite interagieren, bis sie vollständig geladen ist. Als Alternative werden deshalb sogenannte Skeleton Screens immer beliebter.

Skeleton-Screen mit Avatar-Support in Inoic 4.1. Quelle: Ionic Blog

Die Zeit bis zum vollständigen Laden einer Seite wird durch Skeleton Screens zwar nicht verkürzt. Sie zeigen aber bereits am Anfang die kompletten Strukturelemente einer Seite an – beispielsweise als ausgegraute Platzhalter wie in obigem Bild, die nach und nach durch den konkreten Inhalt ersetzt werden. Der User hat nicht das Gefühl, warten zu müssen – die gefühlte Performance einer Seite verbessert sich.

Skeleton Screens werden in Ionic schon seit Längerem unterstützt. In Ionic 4.1 wurden die Möglichkeiten nun aber erweitert. So kann die Komponente ion-skeleton-text nun auch innerhalb von Ionic-Media-Controls wie ion-avatar oder ion-thumbnail genutzt werden. Zudem kann der Skeleton-Text nun animiert werden. Wird ein Skeleton-Text innerhalb eines Avatars oder Thumbnails platziert, passt er sich automatisch an die Größe seines Containers an.

Checkboxen und neue CSS-Display-Utilities

Neues gibt es zudem in der Checkbox-Komponente. Neben den bekannten Werten „aktiv“ und „inaktiv“ kann ion-checkbox nun auch den Zustand „indeterminate“ annehmen. Dies ist insbesondere für Listen von Checkboxen nützlich, wenn nicht alle, sondern nur ein Teil der einzelnen Checkboxen ausgewählt sind.

Indeterminate-Checkboxen in Ionic 4.1. Quelle: Ionic Blog

 

Der Zustand „indeterminate“ wird in der übergeordneten Checkbox durch ein „Minus“-Zeichen visualisiert.

Ionic 4.1 bringt auch neue CSS-Klassen mit, die bei der Entwicklung von responsiven Designs und beim Verstecken von Elementen helfen sollen. Fügt man die neue ion-hide-Klasse zu einem Objekt hinzu, wird dessen Display-Wert auf none gesetzt und das Element wird versteckt. Mit den neuen .ion-hide-{breakpoint}-{dir}-Klassen können Entwickler anhand der Bildschirmgröße Breakpoints für das Verstecken von Elementen definieren. Die in Ionic 4.1 eingeführten CSS-Utilities können in bestehenden Ionic-Angular-Projekten genutzt werden wenn @import '~@ionic/angular/css/display.css'; am Ende von global.scss eingefügt wird. Im Ionic-Bundle für React und Vue stehen diese Features ebenfalls zur Verfügung.

Was ist Ionic?

Ionic ist ein Framework für die Entwicklung mobiler Webanwendungen für verschiedene Plattformen. Mittels HTML5, CSS, Sass und JavaScript können hybride Apps und Progressive Web Apps (PWA) für iOS, Android und die Universal Windows Platform entwickelt und über die jeweiligen App Stores ausgerollt werden. Basierte Ionic ursprünglich auf dem JavaScript Framework Angular, erfolgte mit Ionic 4.0 der Umstieg auf den Web-Components-Standard. Damit kann Ionic auch zusammen mit anderen JavaScript-Frameworks wie React oder Vue.js eingesetzt werden.

Weitere Informationen zu den neuen Features und Bugfixes in Ionic 4.1 können dem entsprechenden Blogpost von Brandy Carney (Framework Developer, Ionic) sowie den Release Notes entnommen werden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -