Faner kan være nyttige for å dele opp innholdet på siden i logiske «blokker» og forenkle navigasjonen for brukerne.
For å implementere faner i løsningen bruker du komponentene Tab og TabGroup. Dette er knapper med fane-funksjonalitet, som grupperer innholdet slik at é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 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.