Tabs
Intro
Tabs brukes til å veksle mellom paneler på en side. Dette hjelper brukere med å navigere mellom relatert innhold uten å bytte side. Ett panel er alltid valgt.
Eksempler
Small brukes på interne flater der det er behov for et mer komprimert grensesnitt.
'selectionFollowsFocus' gjør at valgt tab følger fokus ved bruk av piltaster.
Retningslinjer
Tekstmengde
Teksten på en tab bør være kort og beskrive panelet den åpner. En tab med tekst over flere linjer er ikke brukervennlig.
Antall tabs
Gjør en vurdering på antall tabs i løsningen din. For mange kan oppleves uoversiktlig for brukeren, og kan føre til horisontal skrolling på små skjermer. Det går også an å bytte ut tab-menyen med en select på små skjermer om det funker bedre.
Bare ikoner
Tabs med bare ikoner bør kun brukes i ekspertløsninger, siden ikoner er vanskelig å forstå for vanlige brukere. Beskriv i så fall tab-elementene 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.
Automatisk aktivering
Du bør bare bruke automatisk aktivering (selectionFollowsFocus) dersom innholdet i panelet allerede eksisterer i DOMen. Hvis ikke, kan brukeropplevelsen med tastaturnavigasjon være treg.
Endre URL
Tabs bør ikke brukes til sidenavigasjon, da det vil være en uventet oppførsel som kan forvirre brukeren. Det kan også være brudd på WCAG 1.3.1. Men du kan fint endre URLen uten at dette nødvendigvis teller som navigasjon, som en måte å knytte valgt tab til URLen. Dette kan ofte løses ved bruk av shallow-routing, noe de fleste routing-rammeverk støtter. Under er et 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.
Tilgjengelighet
Tastaturinteraksjon
Komponenten implementerer roving tabindex for fokus og tastaturnavigering mellom knappene.
Som standard må brukeren trykke enter eller space for å aktivere en fane. Du kan endre til automatisk aktivering (der fanen blir valgt automatisk med piltastene) ved å sette prop-en selectionFollowsFocus til true.
Props
Tabs
size?
- Type:
"medium" | "small" - Default:"medium"
- Description:
onChange?
- Type:
((value: string) => void) - Description:
value?
- Type:
string - Description:
defaultValue?
- Type:
string - Description:
selectionFollowsFocus?
- Type:
boolean - Default:false
- Description:
loop?
- Type:
boolean - Default:true
- Description:
iconPosition?
- Type:
"left" | "top" - Default:"left"
- Description:
fill?
- Type:
boolean - Default:false
- Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tabs.List
children
- Type:
ReactNode - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tabs.Tab
as?
- Type:
React.ElementType - Description:
label?
- Type:
ReactNode - Description:
icon?
- Type:
ReactNode - Description:
value
- Type:
string - Description:
id?
- Type:
string - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLButtonElement> - Description:
Tabs.Panel
children
- Type:
ReactNode - Description:
value
- Type:
string - Description:
lazy?
- Type:
boolean - Default:true
- Description:
id?
- Type:
string - Description:
className?
- Type:
string
ref?
- Type:
LegacyRef<HTMLDivElement> - Description:
Tokens
| Token | Fallback |
|---|---|
| --ac-tabs-border | --a-border-divider |
| --ac-tabs-text | --a-text-default |
| --ac-tabs-hover-border | --a-border-subtle-hover |
| --ac-tabs-selected-border | --a-border-action-selected |
| --ac-tabs-selected-text | --a-text-default |
| --ac-tabs-focus-text | --a-text-default |
