Komponenter
Tabs
Tabs lar brukerne navigere mellom relaterte deler av innholdet, der én del vises om gangen. Dette er en effektiv måte å organisere og presentere relatert innhold på samme side.
React
const Preview = () => { return ( <Tabs defaultValue='value1'> <Tabs.List> <Tabs.Tab value='value1'>Tab 1</Tabs.Tab> <Tabs.Tab value='value2'>Tab 2</Tabs.Tab> <Tabs.Tab value='value3'>Tab 3</Tabs.Tab> </Tabs.List> <Tabs.Panel value='value1'>content 1</Tabs.Panel> <Tabs.Panel value='value2'>content 2</Tabs.Panel> <Tabs.Panel value='value3'>content 3</Tabs.Panel> </Tabs> ); }; render(<Preview />)
Bruk Tabs når
- innhold skal struktureres uten å laste en ny side
- informasjonen med fordel kan deles opp i tydelig merkede seksjoner
- navigasjonen blir enklere ved at brukeren slipper å se alt innhold samtidig
Unngå Tabs når
- det er viktig å gi en umiddelbar oversikt over innholdet
- innhold må kunne sammenlignes på tvers av seksjoner
- brukeren skal gjennom en stegvis prosess der rekkefølgen er viktig
- store mengder innhold gjør at siden kan bli treg å laste
- innholdet like godt kan vises samlet på én side eller fordeles på flere sider
Eksempel
Kun ikoner
Tabs kan vises med bare ikoner for et mer kompakt utseende.
Sørg for at ikonene er intuitive og har beskrivende titler for skjermlesere.
I eksempelet under har vi lagt Tooltip rundt Tabs.Tab for å gi beskrivende tekst til ikonene.
React
const IconsOnly = () => { return ( <Tabs defaultValue='car'> <Tabs.List> <Tooltip content='Dine biler'> <Tabs.Tab value='car'> <CarIcon title='car' /> </Tabs.Tab> </Tooltip> <Tooltip content='Dine sykler'> <Tabs.Tab value='bicycle'> <BicycleIcon title='Bicycle' /> </Tabs.Tab> </Tooltip> <Tooltip content='Dine motorsykler'> <Tabs.Tab value='motorcycle'> <MotorcycleIcon title='Motorcycle' /> </Tabs.Tab> </Tooltip> </Tabs.List> <Tabs.Panel value='car'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='bicycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='motorcycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> </Tabs> ); }; render(<IconsOnly />)
Ikoner med tekst
Kombinasjonen av ikoner og tekst gir både visuell og tekstlig beskrivelse av innholdet.
Ikonene bør være dekorative og markeres med aria-hidden.
React
const IconsWithText = () => { return ( <Tabs defaultValue='car'> <Tabs.List> <Tabs.Tab value='car'> <CarIcon aria-hidden='true' /> Biler </Tabs.Tab> <Tabs.Tab value='bicycle'> <BicycleIcon aria-hidden='true' /> Sykler </Tabs.Tab> <Tabs.Tab value='motorcycle'> <MotorcycleIcon aria-hidden='true' /> Motorsykler </Tabs.Tab> </Tabs.List> <Tabs.Panel value='car'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='bicycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> <Tabs.Panel value='motorcycle'> Du har ingen av denne typen registrert hos oss </Tabs.Panel> </Tabs> ); }; render(<IconsWithText />)
Retningslinjer
Tabs skal brukes til å organisere relatert innhold i separate seksjoner.
Alternativer til Tabs
Før du velger Tabs, vurder om det er bedre å:
- Forenkle og redusere mengden innhold
- Fordele innholdet på flere sider
- Beholde alt på én side, med tydelige overskrifter
- Bruke en innholdsfortegnelse for enklere navigasjon
Beste praksis
- Begrens antall
Tabs- for mange skaper dårlig oversikt, særlig på små skjermer - Bruk tydelig navn på
Tabs- Den skjuler innhold, så det er viktig å indikere hva som ligger bak - Plasser viktigst innhold først - organiser
Tabsetter brukerens behov - Hold
Tabspå én linje - LangeTabseller for mangeTabskan gjøre navigasjonen vanskelig - Unngå deaktiverte
Tabs- Fjern deaktiverteTabseller forklar hvorfor de er tomme
Tekst
Tabs bør være korte og beskrivende, slik at brukeren lett forstår hva de vil se når de klikker. Hvis det er vanskelig å lage presise Tabs, kan det tyde på at innholdet ikke er godt strukturert.
Hvis det er behov for å gi en overordnet kontekst, kan en felles tittel plasseres over Tabs-komponenten. Dette kan fungere som en "catchall"-beskrivelse som gir brukeren rask oversikt over innholdet i Tabs.