Tabs

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

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

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

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

TabPanels

import { TabPanels } from '@entur/tab';

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

TabPanel

import { TabPanel } from '@entur/tab';

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