Gebruiksscenario’s
Het Flow Layout veld fungeert als een responsieve container waarmee je velden in naast elkaar geplaatste kolommen of grids kunt groeperen. Het is het primaire hulpmiddel voor het optimaliseren van schermruimte, waarbij je wegbeweegt van een enkele kolom “stapel” naar een professioneler, dashboard-achtig interface.
Gebruiksscenario’s
Flow Layout wordt het best gebruikt wanneer gegevensinvoer kort is (bijv. getallen, schakelaars of datums) en niet de volledige breedte van het scherm nodig heeft.
- Inspectieformulieren: Toon metrische gegevens zoals Oliepeil, Druk en Temperatuur naast elkaar voor snelle invoer.
- Apparaatdetails: Groepeer Serienummer, Model en Status in één rij.
- Mediagalerijen: Organiseer meerdere foto- of bestandsuploadingsvelden in een schoon raster.
- Statusdashboards: Lijn “Geslaagd/Mislukt” indicatoren of “Goed/Matig/Slecht” metrische gegevens uit voor snelle beoordeling.
Configuratie-instellingen
Het layoutgedrag wordt bepaald door het Responsieve Breakpoint, dat bepaalt wanneer de app schakelt van “Mobiel” regels naar “Tablet” regels.
| Eigenschap | Beschrijving | Beperking |
| Responsieve Breakpoint | De pixelbreedte die bepaalt waar een “Mobiel” scherm eindigt en een “Tablet” scherm begint. | Door gebruiker gedefinieerd (px) |
| Mobiele Kolommen | Het aantal kolommen dat wordt weergegeven op schermen onder het breakpoint. | Vast op 2 |
| Tablet Kolommen | Het aantal kolommen dat wordt weergegeven op schermen boven het breakpoint. | 2 tot 4 |
Best Practices voor Ontwerp
Om ervoor te zorgen dat je formulieren toegankelijk en gemakkelijk navigeerbaar blijven, volg deze ontwerpprincipes:
✅ Wel doen
- Logische Groepering: Plaats alleen gerelateerde velden (bijv. Adresregel 1 en Adresregel 2) in dezelfde container.
- Visueel Evenwicht: Gebruik velden van gelijke hoogte. Combineer een Tekstinvoer met een Dropdown, in plaats van een Selectievakje met een Handtekening veld.
- Test op Apparaten: Bekijk het formulier altijd op een fysiek mobiel apparaat om ervoor te zorgen dat de 2-kolom mobiele layout niet te vol is voor de specifieke veldlabels.
❌ Vermijden
- Mengeling van Bedieningselementen: Het plaatsen van een grote Tekstvak met meerdere regels naast een kleine Schakelaar veroorzaakt onhandig witruimte en uitlijningsproblemen.
- Overvolle Lay-out: Alleen omdat je kan 4 kolommen op een tablet gebruiken, betekent niet dat je het moet doen. Als je labels lang zijn, blijf je bij 2 of 3 kolommen.
- Labels Negeren: Onthoud dat lange veldlabels omslaan, wat potentieel velden uit hun horizontale uitlijning kan duwen.
Antwoord niet gevonden?
Staat jouw vraag er niet bij? Neem dan direct contact met ons op.
Contact opnemen