3. Gluestack UI
3. Gluestack UI
In deze oefening bouw je verder op het lesvoorbeeld en oefen je op
- Het gebruik van gluestack-ui componenten
- Het gebruik van NativeWind
- De concepten uit de vorige les
Startbestanden
ActionSheet aanpassen
Het ActionSheet dat opgebouwd is in toDoItem.tsx werkt wel, maar als je naar een detailpagina navigeert, of op een ander element in het menu klikt, sluit dit niet automatisch. Pas dit menu aan zodat dit sluit wanneer je op één van de opties klikt.
ToDoItem aanpassen
Pas de ToDoItem component aan zodat deze er uit ziet zoals onderstaand screenshot. Gebruik hiervoor componenten uit gluestack-ui en klassen uit NativeWind.
Taken koppelen aan labels
Breidt de detailpagina van een taak uit zodat labels toegevoegd en verwijderd kunnen worden. De verschillende labels worden getoond in een lijst waar zowel de ingekleurde checkbox als de naam van het label de kleur krijgt die gekoppeld is aan het label. Het moet mogelijk zijn om op een item in de lijst te drukken, het mag niet nodig zijn dat je specifiek op de checkbox klikt.
Afhankelijk van de manier waarom je de pagina opbouwt, kan de extraData property van de LegendList component handig zijn.
Badges
Gebruik de Badge component uit gluestack-ui om onderstaande lay-out te implementeren. Voor elk label moet een badge weergegeven worden.
De badges worden weergegeven in een horizontale lijst, als er meer labels zijn dan er op het scherm passen, moeten hierin gescrold kunnen worden
Taken per label
Maak een nieuwe pagina aan die via de tabbar bereikbaar is en de taken weergeeft per label. Gebruik hiervoor de Accordion component.
