Intro
Tabs brukes til å veksle mellom paneler på en side. Dette hjelper brukere med å navigere mellom relatert innhold uten bytte kontekst. Komponenten består av en rad med tab-knapper. En tab-knapp er alltid valgt, fordi et panel alltid vises.
Egnet til:
- Organisere relatert innhold på en enkelt side
Uegnet til:
- Filtrering og sortering
- Navigasjon mellom sider
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")
På interne flater kan man bytte tekststilen til “detail” ved behov.
Disabled
Tabs kan ikke være disabled.
Retningslinjer
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.
Tekniske 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.
Tilgjengelighet
Tastaturinteraksjon
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.
| Kommando | Interaksjon |
|---|---|
| Tab | Flytter fokus til aktiv tab |
| Shift+Tab | Flytter fokus til element før tabs i tabindex |
| Space | Velger tab |
| Enter | Velger tab |
| ArrowRight | Flytter fokus til neste tab |
| ArrowLeft | Flytter fokus til forrige tab |
| Home | Flytter fokus til første tab |
| End | Flytter fokus til siste tab |
| PageUp | Flytter fokus til første tab |
| PageDown | Flytter fokus til siste tab |
Props
Tabs
- size?"medium" | "small"
- Changes padding and font-size
- onChange? ((value: string) => void)
- onChange callback for selected Tab
- value? string
- Controlled selected value
- defaultValue? string
- If not controlled, a default-value needs to be set
- selectionFollowsFocus?boolean
- Automatically activates tab on focus/navigation
- loop?boolean
- Loops back to start when navigating past last item
- iconPosition?"left" | "top"
- Icon position in Tab
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Tabs extends HTMLDivElement
Tabs.List
- children ReactNode
- <Tabs.Tab /> elements
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Tabs.List extends HTMLDivElement
Tabs.Tab
- as? React.ElementType
- OverridableComponent-api
- label? ReactNode
- Tab label
- icon? ReactNode
- Tab Icon
- value string
- Value for state-handling
- className? string
- ref? Ref<HTMLButtonElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Tabs.Tab extends HTMLButtonElement
Tabs.Panel
- children ReactNode
- Tab panel content
- value string
- Value for state-handling
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Tabs.Panel extends HTMLDivElement
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 |
| --ac-tabs-selected-text | --a-text-default |
| --ac-tabs-focus-text | --a-text-default |
