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.
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.
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.
Gjør slik/ikke gjør slik
Unngå å bruke kun ikoner som titler på faner
Sørg for at evt ikoner kommuniserer hvilken type innhold som er i fanen
Hold titlene på fanene korte og konsise
Anatomi
- Aktiv fane
- Tag (valgfritt)
- Ikon (valgfritt)
- Sidetittel på fane
- Ikke aktiv fane
- Aktiv linje
- Skillelinje