Tabs

Egnet til:

• Steder med mye innhold som kan deles inn logisk.
• Når bruker har behov for å veksle mellom visninger innenfor samme kontekst, og når de ikke trenger å se innholdet fra de ulike visningene samtidig.

Uegnet til:

• Sider med lite informasjon. Hvis alt innholdet kan vises samlet, blir faner overflødig.
• Navigasjon mellom sider.

Teknisk dokumentasjon

Se Tabs i Storybook for tekniske detaljer. 

Varianter

Tabs kan brukes med eller uten kantlinje. Den finnes i to størrelser: normal og small.

Normal, uten kantlinje:

Small, med kantlinje:

Hvordan bruke komponenten  

• Arkfaner skal som hovedregel være på én linje, og både tittel og rekkefølge på fanene er fast. Det gjør det forutsigbart for brukeren hvor fanen er og hva som skjer når man velger den.
• Etterstreb en logisk inndeling av innholdet slik at brukeren enkelt kan forutse hvilken type informasjon som ligger i fanen. Bruk korte tekster på fanetitlene.
• Plasser arkfanene på toppen av siden, ikke nede eller til venstre eller høyre.
• Unngå å ha flere tabs inni hverandre.

Arkfaner på mobil

Hvis skjermen er smalere enn det som er behovet for å vise alle fanene, er det to tilnærminger - i prioritert rekkefølge.

1. Erstatte tabs med en select hvor en velger fanen i listen. 
2. Brekke innholdet over flere linjer (multiline). Dette valget gjør fanenes plassering mer flytende og mindre forutsigbar – så vurder å bruke select først. 

Gjør slik
Erstatte tabs med select

Gjør slik (hvis du må):
Tabs over flere linjer

Lukking og annen avansert funksjonalitet

Hvis du har behov for å lukke faner eller på en eller annet måte koble funksjonalitet knyttet til innholdet i en fane, anbefaler vi å plassere dette i innholdsdelen til den aktuelle fanen.

Universell utforming  

• Faneinnholdet bør starte med en overskrift for at skjermlesere enkelt kan navigere dit fra fanevalgene.
• Sjekk at standard tastaturnavigering fungerer, det vil si, at fanevalgene har ett tabstopp og at du må bruke piltaster høyre/venstre og enter/mellomrom for å bytte fane.
• Ikon i fanevalg regnes som pynt og skal ikke leses med skjermleser.