A content switchert ugyanazon tartalom különböző nézetei, megjelenítési módjai közötti váltásra vagy a tartalom szűrésére használjuk.
Fejlesztői dokumentáció
Segment: A komponens interaktív eleme, amely a nézetek közötti váltásra vagy szűrésre szolgál. Kiválasztott vagy nem kiválasztott állapotú lehet.
Label: A segment szöveges címkéje.
Track: A komponens teljes befoglaló területe, amelyen belül elhelyezkednek a szegmensek.
A content switcherneknek legalább 2 szegmenst kell tartalmaznia. A szegmensek száma legfeljebb annyi lehet, ami még nem okoz oldalirányú görgetést.
A kiválasztott szegmens a gombokhoz hasonló erős vizuális kiemelést kap. A nem kiválasztott szegmens háttér nélkül jelenik meg a tracken.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A content switcher szélessége legalább 10rem. A szegmensek mindig ugyanolyan szélességűek.
A szegmensek labele lehetőleg egy rövid szó. Ha nem fér ki a label, akkor a szöveg vége levágódik.
A szegmensek teljes területe interaktív.
A content switcher egyik szegmense mindig kiválasztott, de egyszerre csak egy szegmens lehet kiválasztva.
A content switcher labele legyen a lehető legtömörebb, legfeljebb 1-2 rövid szó.
A content switcherek elrejtik a tartalmakat, ezért a labelnek világosan meg kell fogalmaznia, hogy mit tartalmaz egy-egy szegmens. Ha a label nem világos, a felhasználó nem fogja tudni, hogy érdemes-e rákattintania.
Használjunk egyszerű főneveket, és hagyjuk el az akciót (pl. mutatása, váltása, megtekintése, szűrése).
Lehetőleg a labelek megfogalmazása és hossza is legyen hasonló.
A content switcher általában ugyanazon tartalom különböző nézetei, megjelenítési módjai közötti váltásra vagy a tartalom szűrésére használjuk.
Tipikus felhasználási esete a megjelenítési módok – például térképes vagy lista nézet, grafikus vagy táblázatos nézet, stb. – közötti váltás.
Használhatjuk hosszabb tartalmak, listák – például ügyek, hírfolyam, üzenetek, stb. – kisebb csoportokra bontására, kategóriák szerinti szűrésére is.
A különböző, egymástól független tartalmak közötti váltásra Tabot használunk. A tartalom általában kizárólag az adott tabra érvényes, és nem jelenik meg más tabok alatt.
A content switcherrel ezzel szemben 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.
Ha két lehetséges állapot – például egy funkció ki- és bekapcsolása – közül választhatnak a felhasználók, content switcher helyett a Switch komponenst használjuk.
A szegmensek közötti váltás nem tölti újra az oldalt, csak a content switcher alatti tartalom változik, akár animálva, töltési állapottal.
A fókuszálás vagy aktiválás egyből indítja az opciót, nem kell újra aktiválni.
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 design system sztenderd interakciós állapotainak logikája miatt a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
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 Tabokhoz hasonlóan a content switcher is egy Tab stoppal rendelkezik, a szegmensek között a kurzorbillentyűkkel lehet váltani.
A komponens tablistként van implementálva úgy hogy minden fül egy <button> tab role attribútummal.
A kiválasztott szegmens aria-selected="true" és tabindex="0" attribútumokkal rendelkezik. A többi szegmens esetén az attribútumok értéke "false" és "-1".
