Tabs
Release dato: 29.01.2024
Sist oppdatert: 17.10.2025
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.
Test komponenten
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 @oslokommune/punkt-elements/dist/pkt-tabs.js;
import @oslokommune/punkt-elements/dist/pkt-tab-item.js;import { PktTabs, PktTabItem } from '@oslokommune/punkt-react';<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-tabs.js" type="module"></script>
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-tab-item.js" type="module"></script>Testing
Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres:
await window.customElements.whenDefined("pkt-tabs");Props
PktTabs
| Prop | Type | Beskrivelse |
|---|---|---|
tabs | array | Liste med lenker eller funksjoner for hver tab (Gammel mÄte Ä sette opp tabs pÄ, bruk heller PktTabItem inni PktTabs) |
| boolean | Aktiverer piltastnavigasjon mellom tabs. Skrur ogsÄ pÄ role='tab' og aria-selected attributter. |
| boolean | Deaktivering av piltastnavigasjon (f.eks. for ren navigasjonsmeny). Overstyrer arrowNav-propsen. |
| Slot (children) | Beskrivelse |
|---|---|
default | PktTabItem-komponenter |
| Event | Beskrivelse |
|---|---|
onTabSelected | Returnerer indeksen til den klikkede taben (React) |
tab-selected | Returnerer indeksen til den klikkede taben |
PktTabItem
| Prop | Type | Beskrivelse |
|---|---|---|
active | boolean | Er dette den aktive taben? |
href | string | URL for taben. Hvis satt, rendres taben som en lenke. |
icon | icon | Navnet pÄ ikonet som skal vises |
tag | string | Tekst som vises i en tag pÄ taben |
| bluegreenredbeigeyellowgreygrayblue-light | Utseendet til tag-en |
index | number | Tabens indeks i listen. Brukes for navigasjon og callbacks. MÄ settes eksplisitt nÄr tabs mappes. |
controls | string | Setter aria-controls attributtet pÄ taben |
| Slot (children) | Beskrivelse |
|---|---|
default | Teksten/innholdet i taben |
| Event | Beskrivelse |
|---|---|
click | UtlÞses nÄr taben klikkes. Mottar event-objektet som parameter. |