Gå til hovedinnhold
KOMPONENTER

Tabs

npmv0.4.61

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

npm install @entur/tab
@import '@entur/tab/dist/styles.css';

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

import { Tabs } from '@entur/tab';
NavnTypeBeskrivelse
children?ReactNode

Overskriften til taben

onChange?((index: number) => void)

Kalles når taben endres

defaultIndex?number

Hvilken tab som skal være åpen by default

index?number

Den åpne indexen

as?string | React.ElementType

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

import { TabList } from '@entur/tab';
NavnTypeBeskrivelse
children?ReactNode

Tab-komponenter

as?string | React.ElementType

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

import { Tab } from '@entur/tab';
NavnTypeBeskrivelse
children?ReactNode

Overskriften til taben

disabled?boolean

Om taben er disabled eller ikke

as?string | React.ElementType

HTML-elementet eller React-komponenten som lager komponenten

removeActiveLine?boolean

<Tab /> er hver av ark-fanene. De inneholder som regel bare en enkel tekst.

TabPanels

import { TabPanels } from '@entur/tab';
NavnTypeBeskrivelse
children?ReactNode

Tab-panelene

as?string | React.ElementType

HTML-elementet eller React-komponenten som lager komponenten

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

TabPanel

import { TabPanel } from '@entur/tab';
NavnTypeBeskrivelse
children?ReactNode

Overskriften til taben

as?string | React.ElementType

HTML-elementet eller React-komponenten som lager komponenten

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

En observant bruker vil oppdage at TabPanel mottar fokusmarkering ved tabbing til den. Dette er fordi rammeverket som brukes for å bygge disse komponentene følger WAI-ARIA prinsippene for tilgjengeliget, og dette er derfor best-practice. Interesserte kan lese mer om WAI-ARIA kravene til Tabs her.

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 (?).

Rediger denne siden på Bitbucket