Tabs

Kildekode på GitHub · Les som Markdown

Tabs lar brukeren bytte mellom ulike paneler med relatert innhold. Komponenten er bygget på Radix UI Tabs og støtter full tastaturnavigasjon og tilgjengelighet.

Importering

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@kilden/designsystem";

Grunnleggende bruk

<Tabs defaultValue="preview">
<TabsList>
  <TabsTrigger value="preview">Forhåndsvisning</TabsTrigger>
  <TabsTrigger value="code">Kode</TabsTrigger>
</TabsList>
<TabsContent value="preview">
  <p>Her ser du en forhåndsvisning av komponenten.</p>
</TabsContent>
<TabsContent value="code">
  <pre style={{ padding: "1rem", background: "var(--color-neutral-surface-default)", borderRadius: "0.5rem" }}>
    {'<Button variant="secondary">Klikk</Button>'}
  </pre>
</TabsContent>
</Tabs>

Flere faner

<Tabs defaultValue="react">
<TabsList>
  <TabsTrigger value="react">React</TabsTrigger>
  <TabsTrigger value="vue">Vue</TabsTrigger>
  <TabsTrigger value="svelte">Svelte</TabsTrigger>
</TabsList>
<TabsContent value="react">
  <p>Importer komponenten med <code>import { "{ Button }" } from "@kilden/designsystem"</code></p>
</TabsContent>
<TabsContent value="vue">
  <p>Vue-støtte kommer snart.</p>
</TabsContent>
<TabsContent value="svelte">
  <p>Svelte-støtte er ikke planlagt ennå.</p>
</TabsContent>
</Tabs>

Deaktivert fane

Individuelle faner kan deaktiveres med disabled-prop-en.

<Tabs defaultValue="aktiv">
<TabsList>
  <TabsTrigger value="aktiv">Aktiv fane</TabsTrigger>
  <TabsTrigger value="deaktivert" disabled>Deaktivert</TabsTrigger>
</TabsList>
<TabsContent value="aktiv">
  <p>Denne fanen er aktiv. Den deaktiverte fanen kan ikke klikkes.</p>
</TabsContent>
</Tabs>

Bruksanbefalinger

Bruk for relatert innhold

Tabs egner seg best når innholdet i de ulike panelene er relatert og på samme nivå — f.eks. kode vs. forhåndsvisning, eller ulike varianter av en komponent.

Ikke bruk som navigasjon

Tabs skal ikke brukes for sidenavigasjon. Bruk lenker eller en meny for det. Tabs bytter innhold innenfor samme side.

Tilgjengelighet

Bruker role="tablist", role="tab" og role="tabpanel" automatisk
Piltaster navigerer mellom faner
Home og End hopper til første/siste fane
Enter eller Space aktiverer en fane
Deaktiverte faner hoppes over ved tastaturnavigasjon

Props

Tabs (rot)

Prop	Type	Default	Beskrivelse
`defaultValue`	`string`	—	Verdien til fanen som er aktiv ved oppstart
`value`	`string`	—	Kontrollert aktiv fane
`onValueChange`	`(value: string) => void`	—	Kalles når aktiv fane endres

TabsTrigger

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Unik verdi som knytter fanen til et panel
`disabled`	`boolean`	`false`	Deaktiver fanen

TabsContent

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Verdien som knytter panelet til en fane