Tabs
Tabs/faner er en enkel måte å organisere innhold på ved å gruppere lignende informasjon på samme side. Dette gjør at innhold kan sees uten at brukeren må navigere bort fra den siden.
Innhold for Bedrifter
Best practices
- Denne komponenten er i første omgang utformet for å brukes i innholdsdelen av en side, og er designet for å brukes med ett nivå.
- Bytter visning av innhold på samme side - navigerer ikke til en ny.
- Brukes horisontalt med 2-9 tabs.
- Bør ha korte og beskrivende navn.
- Den første fanen skal vise den informasjonen som er mest relevant for brukeren.
Når skal man ikke bruke tabs?
- Bør ikke brukes når det er nødvendig å sammenligne eller se innholdet i de ulike fanene samtidig. Hvis dette er et behov, er det bedre å bruke accordion.
- Bør ikke brukes hvis man trenger å lese gjennom alt innholdet for å forstå en stegvis prosess.
- Skal ikke brukes for å sende brukeren til en ny side.
Eksempler på bruk
React API
Her finner du en oversikt over props på komponentene i pakken.
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
onChange | ingen | Ikke påkrevd | ((tabIndex: number) => void) | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
aria-label | ingen | Påkrevd | string | |
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |
Arvede props
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
ref | ingen | Ikke påkrevd | Ref<HTMLButtonElement> | undefined | |
key | ingen | Ikke påkrevd | Key | null | undefined |
Prop | Beskrivelse | Standardverdi | Påkrevd | Type |
---|---|---|---|---|
className | ingen | Ikke påkrevd | string | undefined | |
children | ingen | Påkrevd | ReactNode |