Samenvatting
Een element ziet er niet altijd hetzelfde uit. Een knop krijgt vaak een andere kleur als je er met de muis overheen gaat, een invoerveld licht op als je erin klikt, en een fout ingevuld veld kleurt rood. Zulke situaties heten staten. Voor elke staat kun je een eigen opmaak instellen via de tabs bovenaan de Opmaak-tab.
Hoe werkt het
Selecteer een element en ga naar de Opmaak-tab. Heeft het element meerdere staten, dan zie je bovenaan een rij tabs. Klik op een tab om die staat te kiezen; alle opmaak die je daarna instelt, geldt voor die staat.
De staten
| Staat | Wanneer geldt het? |
|---|---|
| Standaard | Hoe het element er normaal uitziet — het vertrekpunt |
| Mouseover | Als de bezoeker er met de muis overheen gaat (hover) |
| Focus | Als een veld, knop of link actief is doordat de bezoeker erin klikt of ernaartoe tabt |
| Actief | Bij het huidige of ingedrukte item — bijvoorbeeld het menu-item van de pagina waar je nu bent |
| Error | Bij een fout, bijvoorbeeld een verkeerd ingevuld formulierveld |
| Uitgeschakeld | Als een onderdeel (tijdelijk) niet beschikbaar is |
Niet elk element heeft alle staten. De tabs verschijnen alleen voor de staten die het geselecteerde element daadwerkelijk kent:
- Knoppen — Standaard, Mouseover, Focus, Actief
- Links (in tekst en menu's) — Standaard, Mouseover, Focus; menu-links hebben ook Actief (voor de huidige pagina)
- Invoervelden en tekstvakken — Standaard, Focus, Error
- Keuzerondjes en selectievakjes — Standaard, Actief, Error
- Kaarten, koppen, teksten, afbeeldingen — meestal Standaard en Mouseover
Blokken hebben geen staten. Staten gelden per element — niet voor blokken, containers, rijen, kolommen of pagina's.
Zo stel je het in
- Selecteer het element in de editor.
- Ga naar de Opmaak-tab in het rechter paneel.
- Klik bovenaan op de gewenste staat-tab (bijvoorbeeld Mouseover).
- Stel de opmaak in — bijvoorbeeld een andere achtergrondkleur.
- Wil je dat de overgang tussen Standaard en de staat soepel verloopt in plaats van abrupt? Stel dan een overgang in via de Overgangen-tab.
Wanneer gebruik je dit
- Een knop die van kleur verandert bij hover (Mouseover)
- Een duidelijke focus-rand op invoervelden, goed voor toegankelijkheid (Focus)
- Een rode rand of tekst bij een fout ingevuld veld (Error)
- Het menu-item van de huidige pagina laten opvallen (Actief)
Veelgestelde vragen
Ik zie geen staat-tabs bij mijn element.
Dan heeft het element maar één staat (Standaard), of je hebt een blok geselecteerd in plaats van een element. Staten gelden alleen voor elementen.
Mijn hover-kleur springt te abrupt — hoe maak ik het vloeiend?
Stel een overgang in via de Overgangen-tab. Zet de overgang op de eigenschap die verandert (bijvoorbeeld achtergrondkleur), met een duur van 200–300 milliseconden.
Werkt de Mouseover-staat ook op mobiel?
Op een touchscreen is er geen "muis erover". Reken op mobiel dus niet op hover-effecten voor belangrijke informatie.