A tabot a tartalmak több szekcióra bontására és a szekciók közötti navigálásra használjuk.
Fejlesztői dokumentáció
Label: A tab szöveges címkéje.
Indicator: A kiválasztott tabot jelölő vizuális elem.
Tab group: A tabokat magába foglaló szekció.
Panel: A tabok tartalmát befoglaló szekció.
Desktopon a horizontális verziót használjuk. A tabok közötti váltás frissíti a panelben lévő tartalmat.
A panelben egyszerre mindig csak egy tab tartalma jelenik meg.
Mobileszközökön a vertikális verziót használjuk. A tabok közötti váltás – a desktop verzióval szemben – nem a panelben lévő tartalmat frissíti, hanem legörget a megfelelő tartalomhoz.
A panel egymás alatt tartalmazza az összes tab tartalmát.
A komponens két méretben – small és large – használható. A méretet a rendelkezésre álló helynek megfelelően kell kiválasztani.
A tab háttér nélkül és háttérrel is használható. A háttér bizonyos kontextusokban – például mobilfelületeken – hangsúlyosabb megjelenést és nagyobb aktivációs felületet biztosít. A háttér nélküli verzió nem tartalmaz eltartásokat.
A háttér erőssége subtle, base, medium vagy strong lehet. Az erősséget annak megfelelően kell kiválasztani, hogy milyen háttéren jelenik meg a tab.
Az automatikus és kézi tablisták tabjai eltérően aktiválódnak.
Automatikus tablistáknál a fókusz és a kijelölés szinkronban van. Ha a felhasználó a nyíl billentyűvel egy tabra navigál, a tab kijelölésre kerül, és a panel tartalma automatikusan frissül.
Automatikus tablistát akkor érdemes használni, ha a panel tartalma gyorsan betöltődik. Így a felhasználók gyorsan át tudják nézni az információkat, és döntést tudnak hozni.
Kézi tablisták esetén a felhasználó anélkül navigálhat a nyíl billentyűkkel, hogy a tab alatt lévő panel frissülne. A kijelölt tab kijelölve marad, de a fókusz a következő tabra lép. A fókuszált tab kijelöléséhez – és a panel frissítéséhez – a felhasználónak meg kell nyomnia az Enter vagy Space billentyűt.
Kézi tablistát akkor érdemes használni, ha a panel tartalmának betöltése hosszabb időt vesz igénybe. Így a billentyűzetet vagy képernyőolvasót használó felhasználók anélkül navigálhatnak a tablistán, hogy meg kellene várniuk a tartalom betöltődését.
A kiválasztott tabot vizuálisan színnel és indikátorral jelöljük. Az egyik tab mindig kiválasztott, de egyszerre csak egy tab lehet kiválasztva.
Disabled állapotban a tab nem interaktív, és a címkéje halványabb megjelenést kap.
A komponens interaktív elemei a design system sztenderd interakciós állapotainak logikáját követik.
A tabok külön interaktív területeket képeznek.
Egy tab minimális szélessége 3rem. Ez kényelmes aktiválási felületet biztosít mobilfelületeken is.
A panel minimális magassága 3,375rem.
A tabok szélessége a label hosszához igazodik. A label legyen nagyon tömör, lehetőleg csak 1-2 szó.
A panel magassága a benne lévő tartalomhoz igazodik.
Ha a tabok horizontálisan nem férnek el a rendelkezésre álló helyen, a tab group görgethetővé válik.
A tab labele legyen a lehető legtömörebb, legfeljebb 1-2 rövid szó.
A tabok elrejtik a tartalmakat, ezért a labelnek világosan meg kell fogalmaznia, hogy mit tartalmaz egy-egy tab. Ha a label nem világos, a felhasználó nem fogja tudni, hogy érdemes-e rákattintania.
A tabok elsődleges funkciója a tartalmak csoportosítása, ezért nem használjuk különböző oldalak közötti navigációra.
A Content switcherrel ugyanazon tartalom különböző nézetei között válthatunk. Gyakran előfordul, hogy a tartalmak átfedésben vannak a különböző szegmensek között.
A tabot ezzel szemben különböző, egymástól független tartalmak közötti váltásra használjuk. A tartalom általában kizárólag az adott tabra érvényes, és nem jelenik meg más tabok alatt.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A tabok (tabs) legalább két tabstopot (tabstops) igényelnek: egyet a tablistához (tablist), egyet a panelhez (tabpanel). Ha a felhasználó eltabol a tablistáról, a fókusz a tabpanel első működő elemére ugrik. Ha nincsenek működő elemek, az egész tabpanel fókuszt kap, hogy a tartalom görgetését támogassa.
A tablista egyes tabjai között a nyíl billentyűkkel lehet navigálni. Ha a fókusz a tablista végére ér, automatikusan átlép a lista ellentétes végére.
Az automatikus és kézi tablisták (tablists) tabjai (tab items) eltérően aktiválódnak.
Automatikus tablistáknál a fókusz és a kijelölés szinkronban van. Ha a felhasználó a nyíl billentyűvel egy tabra navigál, a tab kijelölésre kerül, és a panel tartalma automatikusan frissül.
Kézi tablisták esetén a felhasználó anélkül navigálhat a nyíl billentyűkkel, hogy a tab alatt lévő panel frissülne. A kijelölt tab kijelölve marad, de a fókusz a következő tabra lép. A fókuszált tab kijelöléséhez – és a panel frissítéséhez – a felhasználónak meg kell nyomnia az Enter vagy Space billentyűt.
A tabok egy tablistként vannak megvalósítva. Minden tab elem egy <button>-ként van implementálva, tab szerepkörrel (role="tab").
A kiválasztott tab rendelkezik az aria-selected="true" és a tabindex="0" attribútumokkal. Minden más tab esetében ezek az attribútumok "false" és "-1" értékre vannak állítva.
Minden tab az aria-controls attribútum segítségével van társítva a hozzá tartozó panelhez.
