Alpha

Tabs

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

Den aktive fanen bruker nå dominante temafarger, mens de inaktive fanene holder seg nøytrale. Det gjør valgt state tydeligere, og gir mer karakter når brukeren bytter mellom ild, luft, jord og vann.

<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>

Temastyrt uttrykk

Tabs fungerer best når valgt fane får eie uttrykket. Derfor bruker komponenten dominante tokens i aktiv state, mens railen og de inaktive fanene ligger i nøytrale toner.

<div style={{ display: "grid", gap: "1rem" }}>
<Tabs defaultValue="oversikt">
  <TabsList>
    <TabsTrigger value="oversikt">Oversikt</TabsTrigger>
    <TabsTrigger value="detaljer">Detaljer</TabsTrigger>
    <TabsTrigger value="aktivitet">Aktivitet</TabsTrigger>
  </TabsList>
  <TabsContent value="oversikt">
    <p>Den valgte fanen tar opp mer av temaets identitet og skaper et tydeligere fokuspunkt.</p>
  </TabsContent>
  <TabsContent value="detaljer">
    <p>Inaktive faner holder seg roligere, slik at aktiv state popper tydeligere.</p>
  </TabsContent>
  <TabsContent value="aktivitet">
    <p>Bytt tema i dokumentasjonen for å se hvordan uttrykket skifter mellom ild, luft, jord og vann.</p>
  </TabsContent>
</Tabs>
</div>

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>

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. La den aktive fanen få tydelig vekt, og la de øvrige være roligere.

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
Sterkere fargeforskjeller supplerer state, men erstatter ikke ARIA-semantikken
Fokusmarkering beholdes også når en fane allerede er valgt

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