• Organisere relatert innhold på en enkelt side
  • Filtrering og sortering
  • Navigasjon mellom sider (med noen unntak)
Installer
KommandoInteraksjon
TabFlytter fokus til aktiv tab
ShiftTabFlytter fokus til element før tabs i tabindex
SpaceVelger tab
EnterVelger tab
ArrowRightFlytter fokus til neste tab
ArrowLeftFlytter fokus til forrige tab
HomeFlytter fokus til første tab
EndFlytter fokus til siste tab
PageUpFlytter fokus til første tab
PageDownFlytter fokus til siste tab
Tabs med kort tekst
Kort tekst som beskriver hva du får se i panelet
Tabs med for mye tekst
Unngå mye tekst. Tekst på flere linjer er ikke brukervennlig.
Tab-meny med horisontal rulling.
En tab med tooltip
Tooltip'en beskriver tab-elementet
Toggle group brukt til filter
Toggle group er et godt element å bruke til filtrering.
Tab menu brukt til filtrering
Tabmenu påvirker ikke data direkte.
size?"medium" | "small"
Changes padding and font-size
onChange? ((value: string) => void)
onChange callback for selected Tab
value? string
Controlled selected value
defaultValue? string
If not controlled, a default-value needs to be set
selectionFollowsFocus?boolean
Automatically activates tab on focus/navigation
loop?boolean
Loops back to start when navigating past last item
iconPosition?"left" | "top"
Icon position in Tab
className? string
ref? Ref<HTMLDivElement>
Tabs extends HTMLDivElement
children ReactNode
<Tabs.Tab /> elements
className? string
ref? Ref<HTMLDivElement>
Tabs.List extends HTMLDivElement
as? React.ElementType
OverridableComponent-api
label? ReactNode
Tab label
icon? ReactNode
Tab Icon
value string
Value for state-handling
className? string
ref? Ref<HTMLButtonElement>
Tabs.Tab extends HTMLButtonElement
children ReactNode
Tab panel content
value string
Value for state-handling
className? string
ref? Ref<HTMLDivElement>
Tabs.Panel extends HTMLDivElement