A dialog egy rugalmasan használható komponens, amely a felület felett lebegve jelenik meg. A dialogok egy műveletre, kérdésre vagy üzenetre irányítják a felhasználó figyelmét.
Fejlesztői dokumentáció
Container: A komponens teljes befoglaló eleme.
Title: A dialog címe.
Sub-title: A dialog alcíme. (opcionális)
Content: A dialog tartalma.
Actions: A dialoggal kapcsolatos akciók, amelyek Link vagy Button komponensek lehetnek.
Close button: A dialog bezárására szolgáló gomb. (opcionális)
Overlay: A dialog mögötti tartalmat lesötétítő háttér.
A dialogot modális és nem modális módban használhatjuk.
Modális módban nem lehet interaktálni a felület többi tartalmával. Ezt egy félig áttetsző overlay vizuálisan is megerősíti.
A dialog két méretben - small és large - használható. A small méretet mobilfelületeken, illetve 600px-nél keskenyebb felbontásokon használjuk. A large méretet 600px feletti kijelzőkön használjuk.
A dialog trayként, floating ablakként és full-screen módban jelenhet meg.
A tray és a full-screen dialog mindig modal, azaz nem lehet interaktálni a felület többi részével. A floating dialog modal és non-modal is lehet.
A Close button alapértelmezetten be van kapcsolva a komponensen. Ha a dialog csak a benne található akciókkal zárható be, a Close button kikapcsolható.
A komponens a és a benne található interaktív elemek a design system sztenderd interakciós állapotainak logikáját követi.
Ha a Close button be van kapcsolva, a dialog a gomb aktiválásával, az Esc billentyűvel, illetve modális módban a dialogon kívülre kattintással zárható be.
A small méret minimális szélessége 20rem, maximális szélessége 37,5rem.
A large méret minimális szélessége 37,5rem, maximális szélessége nincs.
A tray dialog a felület alján, középre igazítva jelenik meg.
A floating dialogot a felület sarkába, közepére vagy közvetlenül a trigger mellé is pozicionálhatjuk.
A hosszú szövegek több sorba törnek.
A dialognak egyszerűnek és fókuszáltnak kell lennie, nem tartalmazhat nagy mennyiségű információt vagy komplex műveleteket. Ha a tartalom túl hosszú vagy a művelet nem oldható meg egyetlen dialoggal, érdemes más megoldást választani.
A dialog címe egy egyszerű állítás vagy kérdés legyen (Süti tájékoztató; Eszköz eltávolítása; Menti a módosításokat?; Engedélyezi a helymeghatározást?).
Törekedjünk az egyértelműségre. Kerüljük a félreérthető vagy túl általános címeket (Biztos benne?; Figyelmeztetés!; Fontos információ).
A címekre vonatkozó szövegírási útmutató a Nyelvtan és fogalmazás oldalon található.
A dialog szöveges tartalma ne megismételje, hanem pontosítsa vagy kiegészítse a címsort, illetve elmagyarázza az akció következményét.
Az akciónak mindig reagálnia kell a dialog címére. Ha kérdésként fogalmaztuk meg a címet, az akciónak erre kell válaszolnia.
Az akciókra vonatkozó szövegírási útmutatók a Button és a Link komponenseknél találhatók.
A dialog azonnali interakciót igényel a felhasználótól, és gyakran blokkolja a felület többi tartalmát.
A popover egy adott felületi elemmel kapcsolatban kínál kontextuális információkat vagy műveleteket, és nem blokkolja a felület többi tartalmát.
A tray egy panel, amely a képernyő széléről csúszik be, és további információkat vagy műveleteket kínál, anélkül, hogy diszruptálná a felületet.
Mindhárom komponens különböző célt szolgál. Annak megfelelően kell őket használni, hogy mennyire szeretnénk megszakítani a felhasználó munkafolyamatát.
A dialogokat csak egyszerű, egy lépésből álló műveleteknél használjuk. Ha egy folyamat több lépésből áll, inkább új oldalon nyissuk meg.
A hosszú, komplex tartalmakat érdemes dialog helyett új oldalra rakni.
Egyszerre csak egy dialog lehet nyitva, ne rakjuk őket egymásra.
Dialogokkal szándékosan megakaszthatjuk a felhasználót azon a ponton, ahol még következmények nélkül visszaléphet egy akciótól. (Például a képernyő bezárása előtt felhívhatjuk a felhasználó figyelmét arra, hogy mentés nélkül az eddig megadott adatai, beállításai elvesznek.)
A dialogok két lehetőséget biztosítanak: a felhasználó folytathatja a műveletet vagy visszatérhet az előző képernyőre.
Dialogokkal a műveletek sikerességéről vagy sikertelenségéről is tájékoztathatjuk a felhasználókat. Gyakran csak az a céljuk, hogy a felhasználók tudomásul vegyék őket.
A dialogokat egyszerűbb beállítások elvégzésére, dátumok vagy egyéb adatok megadására is használhatjuk.
Dialogokkal műveleteket vagy választási lehetőségeket is megjeleníthetünk. A felhasználó választása azonnal beállításra kerül.
A dialog rugalmasan használható komponens. Alapértelmezetten szövegeket tartalmaz, de bármilyen más komponenssel is személyre szabható.
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 dialog megnyitása után a fókusz a Close buttonra kerül. (Ha nincs bekapcsolva a Close button, a dialog címére kerül a fókusz.) Ha van Close button, a dialog Esc billentyűvel is bezárható.
A dialog modal módban magába zárja a fókuszt. Amíg nyitva van, csak a dialog interaktív elemei fókuszálhatóak. Az utolsó fókuszálható elem utána a fókusz visszakerül az első elemre.
Bezárás után a fókusz arra az elemre kerül vissza, amely megnyitotta a dialogot. Ha ez az elem nem áll rendelkezésre, manuálisan kell a megfelelő elemre helyezni a fókuszt.
Megnyitáskor a fókusz az első interaktív elemre kerül. (Kivéve, ha az autoFocuse értéke false.) A dialog aria-modal=“true” értékkel rendelkezik.
A Tab billentyű a fókuszálható elemek (űrlapelemek, gombok, stb.) között mozog. A felhasználó Tabbal nem mozoghat a dialogon kívül lévő elemekhez.
Az Esc billentyű és a dialogon kívüli kattintás bezárja a dialogot. A háttér nem görgethető, amíg a dialog nyitva van, és az overlay be van kapcsolva (position: fixed).
Bezáráskor a fókusznak vissza kell térnie a dialogot triggerelő elemre.
A komponens befoglalója 1px-es átlátszó keretet tartalmaz, amellyel high contrast és egyéb forced color módokban elkülönül a felület többi elemétől.
