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
Vurder noe annet:
- Filtrering og sortering
- Navigasjon mellom sider (med noen unntak)
Anatomi
Gruppering av flere tab items.
Et tab item som er valgt.
Et tab item som ikke er valgt.
Demo
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")
Tips
På interne flater kan man bytte tekststilen til “detail” ved behov.
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.
| Kommando | Interaksjon |
| Tab | Flytter fokus til aktiv tab |
| ShiftTab | 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 |
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.
