Tabs

Tabs er en meny som gir brukeren mulighet til å bytte mellom lagvis inndelt innhold.

Normal

<Tabs
  tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
  onChange={() => {}}
/>
 Kopiert!

Kombinasjon med panel

Komponenten passer fint i kombinasjon med Panel, hvor normal variant bør plasseres utenfor og langs øverste kant av panelet.

Inntil videre må du manuelt håndtere visning av riktig panel-innhold når aktiv tab endres. Du må også skru avborder og border-radius langs toppen av panelet. Vi jobber med å lage en mer avansert TabPanel komponent som er tenkt å både fikse disse stilene for deg, og håndtere automatisk visning av riktig panel-innhold avhengig av aktiv tab.

Innhold her.

<Tabs
    tabs={[
        {"label": "Første"},
        {"label": "Andre"},
        {"label": "Tredje"}
    ]}
    onChange={() => {}}
/>
<Panel border style={{borderTop:0, borderTopLeftRadius: 0, borderTopRightRadius: 0}}>
    Innhold her.
</Panel>
 Kopiert!

Kompakt

<Tabs
  tabs={[{ label: "Første" }, { label: "Andre" }, { label: "Tredje" }]}
  onChange={() => {}}
  kompakt
/>
 Kopiert!

Rediger siden på Github