Tabs

Release dato: 29.01.2024

Sist oppdatert: –

Tabs (faner) er en type navigasjon pÄ en side som lar brukeren bytte mellom relatert innhold uten Ä forlate siden. Valgt fane pÄvirker innholdet i et avgrenset omrÄde under fanerekken. Tabs gjÞr det enkelt Ä navigere mellom ulike deler av samme kontekst.

Test komponenten

Relaterte komponenter

Varianter

Du kan kombinere flere elementer i fanene:

VariantBeskrivelse
Kun tekstEnkelt felt for lengre tekst
Ikon og tekstIkon sammen med tekst
Tekst og tagTekst med en tag for ekstra informasjon
Ikon, tekst og tagKombinasjon av ikon, tekst og tag

Retningslinjer for bruk

Bruk tabs nÄr

  • innholdet hĂžrer til samme side, men bĂžr deles opp i mindre seksjoner
  • du vil gjĂžre det enkelt Ă„ navigere uten Ă„ forlate konteksten

UnngÄ tabs nÄr

  • innholdet ikke hĂžrer naturlig sammen
  • det blir sĂ„ mange faner at de skaper stĂžy eller forvirring
  • innholdet heller bĂžr vises som en egen side eller seksjon

Skriv korte titler

Tittelen pÄ en fane bÞr vÊre kort, tydelig og beskrive panelet den Äpner. Lange titler eller tekst som gÄr over flere linjer gir dÄrlig lesbarhet.

GjĂžr slik

Gjþr slik – korte og presise fanetitler
Bruk korte og presise titler i faner

UnngÄ

UnngĂ„ – lange fanetitler over flere linjer
UnngÄ lange og uklare fanetitler

Antall faner

GjÞr en vurdering av hvor mange faner lÞsningen trenger. For mange faner kan oppleves overveldende. PÄ smÄ skjermer vil overskytende faner fÄ horisontal scroll.

GjĂžr slik

Gjþr slik – begrenset antall faner for oversiktlighet
Bruk et begrenset antall faner for oversiktlighet

UnngÄ

UnngĂ„ – for mange faner pĂ„ samme nivĂ„
UnngÄ for mange faner pÄ samme nivÄ

Tags og ikoner

UnngÄ Ä bruke kun ikoner som titler pÄ faner, og sÞrg for at eventuelle ikoner kommuniserer hvilken type innhold som er i fanen.

Dersom du bruker tags kan du selv velge hvilken farge du Þnsker Ä ta i bruk basert pÄ innholdet eller budskapet du Þnsker Ä formidle. Les mer om god bruk av tags her.

GjĂžr slik

GjĂžr slik – bruk ikoner og tags for Ă„ tydeliggjĂžre innhold
Bruk ikoner og tags for Ă„ tydeliggjĂžre innhold

UnngÄ

UnngĂ„ – uklare ikoner og utydelige tags
UnngÄ faner med ikoner som ikke gir mening og uklare tags

Responsivitet

  • Tabs skal alltid ligge over innholdet de styrer
  • PĂ„ smĂ„ skjermer vil fanerekken kunne scrolle horisontalt
  • Test at titler, ikoner og tags skalerer godt pĂ„ mobil og nettbrett

Universell utforming

  • Én fane vil alltid vĂŠre aktiv, slik at ett panel alltid er synlig
  • FĂžrste fane skal vĂŠre aktiv ved fĂžrste besĂžk pĂ„ en side
  • Faner som brukes som inline navigasjon fĂžlger WAI-ARIA sine krav til tabs
  • Dersom fanene brukes som lenker, oppfĂžrer de seg som en vanlig lenkemeny
  • Tastaturnavigasjon mĂ„ vĂŠre stĂžttet: bruk “pil hĂžyre/venstre” for Ă„ navigere mellom faner og “enter” for Ă„ velge

Anatomi

ElementBeskrivelse
Aktiv faneFane som er valgt og styrer synlig innhold
Sidetittel pÄ faneTeksten som beskriver innholdet
Tag (valgfritt)Tilleggsinformasjon
Ikon (valgfritt)StĂžtter fanens innhold visuelt
Ikke aktiv faneAndre tilgjengelige valg
Aktiv linjeMarkering under aktiv fane
SkillelinjeSkiller faner fra innholdet under

Implementasjon i kode

Hvordan ta komponenten i bruk?

Props og tokens

PropTypeBeskrivelse
tabsarrayArray of links or functions that make up the tabs
EventBeskrivelse
tab-selectedReturns with index of clicked tab