Faner
Kategoriserer innholdet så brukerne raskt kan finne frem til akkurat den informasjonen de trenger
Bruk av faner
Faner kan være nyttige for å dele opp innholdet på siden i logiske «blokker» og forenkle navigasjonen for brukerne.
Gjør sånn:
- Bruk faner når brukerne skal bytte mellom ulike views i samme kontekst
- Skriv korte og enkle fanenavn, helst ett til to ord
- Plasser alltid rekken med faner øverst i toppen av innholdet
Ikke sånn:
- Gå for faner når brukerne trenger å se innhold fra flere av fanene samtidig, eller sammenligne innholdet
Tab og TabGroup
For å implementere faner i løsningen bruker du komponentene Tab og TabGroup. Dette er knapper med fane-funksjonalitet, som grupperer innholdet så én gruppe er synlig og resten skjult.
Sånn ser en enkelt fane ut:
Aktiv/valgt fane kan vises ved å sende inn selected:
I tillegg kan du sende inn egendefinerte props for å legge til clickhandlere og andre attributter:
Fanene skal alltid grupperes i en TabGroup:
Under ser du et eksempel hvor innhold er knyttet til hver fane.
aria-controls tilsvarer id på elementet som fanen kontrollerer, og er en obligatorisk property som må sendes med i Tab. Se nærmere på eksempelet for hvordan denne brukes i praksis, til å knytte knappen til elementet som vises når knappen er selected.
noBreak
noBreak er en property som kan sendes med til TabGroup, dersom du ønsker å sikre at fanene ikke brekker over flere linjer.
Dette kan være nyttig i tilfeller der man har plass til alt på en linje, selv på f.eks mobil.