Tabs
Tabs lar oss designe grupperte brukergrensesnitt på en enkel måte.
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
<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, og kan være disabled
om man ønsker det. 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 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 (?).