A table komponenssel táblázatban jeleníthetünk meg információkat és adatokat.
Fejlesztői dokumentáció
Row: A táblázat egy sora.
Column: A táblázat egy oszlopa.
Cell: A táblázat egy cellája.
Row divider: A táblázat sorait elválasztó vonal.
Content: A cellák tartalma.
A cellák alapértelmezetten szövegeket, számokat, linkeket, gombokat és badge-eket tartalmazhatnak. (A table más komponensekkel és elemekkel is bővíthető, de ezeket a komponens nem tartalmazza.)
Mobileszközökön lehetőleg ne használjuk. Ha mégis szükséges, a komponens Mobile variánsával egy cellában jeleníthetjük meg a fejlécet és a hozzá tartozó adatot.
A táblázatok fejlécét a Layout opcióval sorként vagy oszlopként definiálhatjuk.
Általában oszlopos elrendezés használunk. A soros elrendezés elsősorban kulcs-érték párok megjelenítésére alkalmas.
A cellák szélessége legalább 3rem, magassága 2,5rem. A fejléc és a “sima” sorok ugyanolyan magasak.
A hosszú szövegek több sorba törnek.
-
A fejléc címe lehetőleg 1-2 szó legyen, de egyértelműen írja le, hogy milyen adatot tartalmaz az adott sor vagy oszlop.
-
Nagy kezdőbetűvel kezdjük. Ügyelünk rá, hogy csak az első szó kezdőbetűje nagy!
Ha csak néhány adatot vagy kulcs-érték párt szeretnénk megjeleníteni, használjunk egyszerű felsorolást.
A cellában a szövegeket alapértelmezetten balra rendezzük. (Az utolsó oszlop gyakran tartalmaz összesítést vagy gombot. Ilyenkor jobbra is rendezhetjük a tartalmat, hogy elkülönüljön a táblázat többi adatától.)
A számokat mindig jobbra rendezzük.
A számok megjelenítésénél design system betűtípusának Tabular beállítását használjuk.
Ezzel a beállítással a számok egyforma szélességűek lesznek, a helyi értékek egymás alá kerülnek, ami segíti az összehasonlítást.
Az üres cellákba – (en dash) karaktert írunk.
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!
