Tabs

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Faner (tabs) er en type navigasjon innad på en side (f.eks. på nivå 3 eller 4), der valgt fane påvirker alt innhold i et begrenset område under fanerekken. Med faner kan brukere enkelt navigere mellom relatert innhold uten bytte kontekst.

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.

He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.

The bedding was hardly able to cover it and seemed ready to slide off any moment.

His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.

"What‘s happened to me?" he thought. It wasn‘t a dream.

Varianter

I fanene har du mulighet til å legge til flere elementer, du kan velge mellom:

Kun tekst
Ikon og tekst
Tekst og tag
Ikon, tekst og tag

Husk at dersom du tar i bruk ikoner er det viktig at de kommuniserer hvilken type innhold som er i en fane. Ikoner bør være enkle og gjenkjennelige.

Farger

Valgt fane skal alltid ha $Border-Blue, #6FE9FF under, mens den som man hviler musen over skal ha $Border-States-Hover, #1F42AA.

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.

Slik bruker du komponenten

Tittelen på fanen bør være kort og beskrive panelet den åpner. Fanene ser ikke bra ut med tekst over flere linjer eller med for lang tekst.

Husk at én fane vil alltid være aktiv siden ett panel alltid vises. Første gang brukeren besøker en side, skal den første fanen være aktiv.

Plassering og responsivitet

Fanene skal plasseres over innholdet de endrer.

Faner i booking-løsningen — Eksempel på god bruk av faner fra Team Booking

Gjør en vurdering på antall faner i løsningen din. For mange kan oppleves voldsomt for brukeren. Om det er flere faner enn det er plass til på små skjermer (som f.eks mobil) vil menyen få horisontal scroll.