Tabs

Et sett med seksjoner av innhold, kjent som tabs, som vises en om gangen.

FigmaEndringslogg

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Test props

Eksempler

Variant - Default

<Tabs defaultValue="tab1" size="medium" variant="default">
   <TabsList>
     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
   </TabsList>
   <TabsContent value="tab1">Innhold 1</TabsContent>
   <TabsContent value="tab2">Innhold 2</TabsContent>
 </Tabs>

Variant - Simple

<Tabs defaultValue="tab1" size="medium" variant="simple">
   <TabsList>
     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
   </TabsList>
   <TabsContent value="tab1">Innhold 1</TabsContent>
   <TabsContent value="tab2">Innhold 2</TabsContent>
 </Tabs>

Retningslinjer

Retningslinjer for bruk er under utvikling.

Merk at det vi i designsystemet kaller "tabs" blir av Apple kalt Segmented controls.

Kode

<Tabs />