Gå til hovedinnhold
KOMPONENTER

Tabs

Tabs lar oss designe grupperte brukergrensesnitt på en enkel måte.

Informasjon

Et tab-panel kan inneholde masse informasjon, sortert og gruppert etter kategori.

Man kan ha langt innhold eller kort innhold, og tab-panelet vil tilpasse seg underveis.

Komponenter

Tab-pakken består av mange forskjellige komponenter, som lar deg komponere en Tab-opplevelse som passer dine behov.

Strukturen til et tabs-panel ser slik ut:

<Tabs>
  <TabList>
    <Tab>Option 1</Tab>
    <Tab>Option 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Panel 1</TabPanel>
    <TabPanel>Panel 2</TabPanel>
  </TabPanels>
</Tabs>

Under får du en beskrivelse av alle komponentene og hvordan du kan sette dem sammen.

Tabs

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Overskriften til taben

onChange(() => void)

Kalles når taben endres

defaultIndexnumber

Hvilken tab som skal være åpen by default

indexnumber

Den åpne indexen

asany

HTML-elementet eller React-komponenten som lager komponenten

<Tabs /> brukes som en wrapper rundt tab-panelet.

Kontrollerbar

I utgangspunktet så er Tabs-paneler selvstyrt. Du kan spesifisere defaultIndex for å si hvilket panel som skal være valgt by default.

Om du ønsker, kan du også styre hvilket panel som er valgt programmatisk. Du kan sette valgt panel med index-propen, og onChange til å lytte på når brukeren ønsker å endre det.

Her er et eksempel der man går fra 1 tab til en annen programmatisk:

TabList

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Tab-komponenter

asany

HTML-elementet eller React-komponenten som lager komponenten

width"fluid"

<TabList /> er listen med tabs på toppen av siden. Denne kommer som første barn til <Tabs />, og godtar flere <Tab /> barn.

Tab

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Overskriften til taben

disabledboolean

Om taben er disabled eller ikke

asany

HTML-elementet eller React-komponenten som lager komponenten

<Tab /> er hver av ark-fanene, og kan være disabled om man ønsker det. De inneholder som regel bare en enkel tekst.

TabPanels

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Tab-panelene

asany

HTML-elementet eller React-komponenten som lager komponenten

<TabPanels /> er wrapper-komponenten rundt alle panelene. Den tar ikke i mot noen spesielle props.

TabPanel

NavnTypePåkrevd?Beskrivelse
childrenReactNode

Overskriften til taben

asany

HTML-elementet eller React-komponenten som lager komponenten

<TabPanel /> er hvert innholdspanel. De må ligge i samme rekkefølge som overskriftene i <TabList />.

Retningslinjer for bruk

Tabs eller faner lar oss designe grupperte brukergrensesnitt på en enkel måte. De benyttes ofte som en menynavigasjon innad på en side (f.eks. på nivå 3 eller 4), der valgt tab påvirker alt innhold under tabsrekken. De kan også benyttes til en avgrenset seksjon på en side, men da med en tydelig ramme rundt det de påvirker (?).