KOMPONENTER

Tab

npmv0.5.0

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

npm install @entur/tab

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

Varianter

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

<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

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

Tab

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

TabPanels

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

TabPanel

<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

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