A bemutatód tökéletesen működött, aztán kiadtál egy új dizájnt, és most az egyik lépés a semmire mutat. Ez a cikk elmagyarázza, hogyan találja meg egy lépés az elemét, mit tesz a Yaplet, ha nem találja, és hogyan írj olyan rögzítést, ami túléli a következő kiadásodat.
Hogyan találja meg egy lépés az elemét
Minden mutató lépés tárol egy szelektort — rövid szöveget, ami leír egy elemet az oldalon, ugyanazon a nyelven, amit a böngészők belül használnak. Egy lépés tartalék szelektorokat is tárolhat. Nyisd ki a lépést a bemutató folyamatlistájában: látni fogod a fő szelektort, alatta a továbbiakat.
Mi történik, ha az elem nincs ott
A Yaplet nem adja fel azonnal. Amikor egy lépés megnyílik, végigmegy ezen a listán, amíg valami nem sikerül:
- Megpróbálja a fő szelektort. Ha az elem az oldalon van és látható, a buborék hozzá rögzül.
- Sorban megpróbálja a további szelektorokat, és az első látható találatot választja.
- Megpróbálja a lépés tartalékait: a lépés alternatív változatait, sorban. Az a tartalék, ami semmire nem mutat, mindig használható, ezért azonnal életbe lép.
- Ha a lépés Kihagyva ha rejtett jelölésű, a bemutató egyből a következő lépésre ugrik.
- Ha az elem egyáltalán nincs az oldalon, a Yaplet körülbelül két másodpercig újrapróbálkozik — nagyjából ötig, ha a bemutató éppen másik oldalra navigált.
- Ha egyik sem, a lépés a képernyő közepén jelenik meg, kiemelés nélkül.
A folyamatlistában a lépés jelvényei megmutatják, melyik van beállítva: a további szelektorok száma, a tartalékok száma, és a Kihagyás jelvény.
A gyakorlati következmény: a hibás szelektor soha nem dönti össze a bemutatót, de a hasznos nyílból lebegő kártya lesz, ami olyasmit magyaráz, amit a látogató nem lát. Javítsd ki, ne hagyd így.
A szelektor megtalálása
A leggyorsabb út a böngésződ fejlesztői eszközei:
- Nyisd meg azt az oldalt, ahol az elem van.
- Kattints jobb gombbal az elemre, és válaszd a Vizsgálat lehetőséget.
- A megnyíló panelben kattints jobb gombbal a kiemelt sorra, és válaszd a Másolás → Szelektor másolása lehetőséget.
Amit kapsz, általában helyes, de törékeny — a böngészők olyan szelektort írnak, ami azt írja le, hol van az elem, és az azonnal elromlik, ha bármi elmozdul. Egyszerűsítsd az alábbi sorrend szerint.
Tartós rögzítés írása
A jó rögzítés azt írja le, mi az elem, nem azt, hol van. Legjobbal kezdve:
- Külön erre szánt attribútum —
[data-tour="new-project-button"]. Kifejezetten a bemutatók kedvéért teszed a saját kódodba. Semmi nem változtatja meg, csak te. - Egyedi azonosító —
#create-project-btn. Megbízható, amíg az azonosítóid nem generálódnak újra minden build során. - Akadálymentesítési címke —
[aria-label="Create project"]. Jó, ha a komponenseid következetesen címkézik magukat. - Osztálynév —
.create-project-button. Dizájnrendszerhez megfelelő. Kerüld az olyan segédosztályokat, mint a.flex; azok több tucat elemre illeszkednek. - Szerkezeti útvonal —
header nav ul li:first-child a. Ma működik, holnap elromlik. Csak akkor, ha semmi más nincs.
Később megjelenő elemek
Vannak elemek, amik csak akkor léteznek, ha előbb történik valami — megnyílik egy menü, betölt egy panel. A lehetőségek, kedvezőbbel kezdve:
- Tedd a lépést arra az oldalra, ahol az elem már látható, a lépés saját oldalcímével, hogy a bemutató először odanavigáljon.
- Adj meg további szelektorokat, amik lefedik a felület lehetséges állapotait.
- Ne adj olyan tartalékot, ami semmire nem mutat, csak azért, mert az elem lassan jelenik meg — a Yaplet azonnal ezt a tartalékot használja ahelyett, hogy várna, így a látogató akkor is a sima kártyát kapja, amikor a valódi elem éppen megjelent volna. Az üres tartalékot azokhoz tartsd fenn, amelyek tényleg nincsenek ott.
- Tegyél késleltetést a triggerre az Oldalmegtekintés után lehetőséggel, hogy a bemutató a lecsengett oldalon induljon.
Újratervezés után
- Nyisd meg a bemutatót, és kattints a Folyamat szerkesztése gombra, hogy az építő újra megnyíljon az éles oldaladon.
- Menj végig azokon a lépéseken, amik megváltozott képernyőket érintenek, és mutass rájuk újra.
- Ments az építőben, majd kattints magának a bemutatónak a Mentés gombjára — az építő önmagában nem őriz meg semmit.
Mi a következő lépés?
A rögzítések a kis képernyőkön romlanak el a leggyakrabban. Lásd: Hogyan működjön a bemutató telefonon és tableten.