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.
Live demo
Relaterte komponenter
Bruk tag for å formidle ekstra informasjon i fanen
Når innhold kan vises/skjules seksjonsvis i samme side
Når brukeren skal navigere mellom sider i et hierarki
Varianter
Du kan kombinere flere elementer i fanene:
| Variant | Beskrivelse |
|---|---|
| Kun tekst | Enkelt felt for lengre tekst |
| Ikon og tekst | Ikon sammen med tekst |
| Tekst og tag | Tekst med en tag for ekstra informasjon |
| Ikon, tekst og tag | Kombinasjon 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
Unngå
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
Unngå
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
Unngå
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
Beskriver hvordan du gjør tabs tilgjengelig
Anatomi
| Element | Beskrivelse |
|---|---|
| Aktiv fane | Fane som er valgt og styrer synlig innhold |
| Sidetittel på fane | Teksten som beskriver innholdet |
| Tag (valgfritt) | Tilleggsinformasjon |
| Ikon (valgfritt) | Støtter fanens innhold visuelt |
| Ikke aktiv fane | Andre tilgjengelige valg |
| Aktiv linje | Markering under aktiv fane |
| Skillelinje | Skiller faner fra innholdet under |
Implementasjon i kode
Hvordan ta komponenten i bruk?
import { PktTabs } from '@oslokommune/punkt-react';Props og tokens
| Prop | Type | Beskrivelse |
|---|---|---|
tabs | array | Array of links or functions that make up the tabs |
| Event | Beskrivelse |
|---|---|
tab-selected | Returns with index of clicked tab |
Farger
| Element | CSS variabel |
|---|---|
| Active border | |
| Hover | |
| Text | |
| Background (default) | |
| Tag (example) | |
Du kan velge å legge til en tag ved siden av en fane for å indikere en varsling. Du kan bruke alle tag-farger dersom fanen har en tag.