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.