Tabs

Eksempler

Varianter

Størrelser

Tabs kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.

Tab-innhold

Teksten i tabs kan være vanlig vekt eller fet.
Tabs har 4 innholdsvarianter:

• Text - kun tekst
• Icon + text right - ikon og tekst til høyre for ikonet
• Icon + text bottom - ikon og tekst under ikonet
• Icon - kun ikon (se seksjon "Bare ikoner")

Disabled

Tabs kan ikke være disabled.

Tilgjengelighet

Interaksjon Tastatur

Tabs bruker designsystemets standard focustilstandsdesign.

Ved default må brukeren taste enter eller space for å velge en fane. Du kan endre interaksjonsmønsteret til automatisk aktivering (der fanen blir valgt automatisk med piltastene) ved å endre verdien til proppen selectionFollowsFocus til true.

Tabs bruker standard ARIA widget-interkasjonsmønsteret der brukeren taster tab for å bevege fokus inn i fanelista, derettet piltastene og evt. enter eller space for å ta valg, så taster tab igjen for å flytte fokus ut av fanelista.

Bruk

Tekstmengde

Teksten på en tab bør være kort og beskrive panelet den åpner. En tab ser ikke bra ut med tekst over flere linjer.

Antall tabs

Gjør en vurdering på antall tabs i løsningen din. For mange kan oppleves voldsomt for brukeren. Om det er flere tabs enn det er plass til på små skjermer vil tab-menyen få horisontal rulling. Det går også an å bytte ut tab-menyen med en select på små skjermer om det funker bedre.

Bare ikoner

Tabs som kun inneholder ikoner bør bare brukes i løsninger til ekspertbrukere. Grunnen er at ikoner er vanskelig å forstå. For vanlig brukere er det få ikoner som er så godt kjent at de ikke trenger forklaring. Det anbefales også at tab-elementene beskrives med tooltip.

Uegnet til filter og sortering

Tabs navigerer mellom paneler og kan derfor ikke brukes til å påvirke data. Det kan blant annet toggle group passe godt til.

Retningslinjer

Du bør bare bruke automatisk aktivering (selectionFollowsFocus) dersom innholdet i tabpanel allerede eksisterer i DOMen. Hvis ikke, kan brukeropplevelsen for tastaturnavigasjonsbrukere være ekstremt treg.

Bruk med navigasjon

Intensjonen med bruk av tabs er å alltid kunne ha en kobling mellom tab og tabpanel. Når man bruker tabs for sidenavigasjon blir ofte siden oppdatert og fokusmarkering blir tilbakestilt. Dette fører til at eks brukere av hjelpeteknologi mister konteksten av hva som endret seg ved tab-navigering.

Men som mange andre regler finnes det unntak. I tilfeller der url oppdateres uten side-oppdatering vil konteksten forbli slik den var og hjelpeteknologier fungerer som ønsket. Dette kan ofte løses ved bruk av shallow-routing, noe de fleste routing-teknologiene støtter. Under er et slikt eksempel med bruk av Nextjs.

Bruke eget tabpanel

I noen tilfeller ønsker man ikke å bruke <Tabs.Panel/>. I de tilfellene er det viktig å bruke riktige roller og aria props. Her er en kode-snippet som løser akkurat det.

Props