Bemutatolépések rögzítése felhasználói felületi elemekhez

A mutató tooltip és videós mutató lépéseknek tudniuk kell, melyik oldalelemet kell megjelölni. Ezt az információt CSS-szelektor formájában adod meg a Yapletnek. Ez a cikk elmagyarázza, hogyan írj megbízható szelektor, hogyan kezeli a Yaplet a hiányzó elemeket, és hogyan frissítsd a szelektorokat a felhasználói felület változásakor.

Hogyan találd meg a helyes CSS-szelektor

A legegyszerűbb módszer a böngésző fejlesztői eszközei:

1. Nyisd meg azt az oldalt, ahol az elem található a böngészőben.
2. Kattints jobb gombbal az elemre, és válaszd az Vizsgálat lehetőséget (vagy nyomd meg az F12 billentyűt, és kattints az elem kiválasztójára).
3. Az Elemek panelen kattints jobb gombbal a kijelölt csomópontra, és válaszd a Másolás → Szelektor másolása lehetőséget.
4. Illesszd be a szelektor a lépés Elemszelektor mezőjébe a bemutató-készítőben.

A böngésző által generált szelektorok gyakran tartalmaznak :nth-child() indexeket, amelyek megváltoznak, ha a DOM sorrendje változik. Ahol lehetséges, egyszerűsítsd őket (lásd alább).

Ellenálló szelektor írása

A legjobb szelektorok azok, amelyek azonosítják az elemet az alapján, hogy mi, nem az alapján, hogy hol van a DOM-ban. Ellenállóság szempontjából sorrendben:

1. Data attribútum — [data-tour="new-project-button"]. Adj hozzá data-tour attribútumot kifejezetten a bemutató horgonyokhoz. Ez a legstabilabb megoldás, mivel csak szándékosan változik.
2. Egyedi azonosító — #create-project-btn. Megbízható, ha az azonosítóid stabilak és nem automatikusan generáltak.
3. ARIA-felirat vagy szerepkör — [aria-label="Projekt létrehozása"]. Jó, ha a komponenseid következetes akadálymentes feliratokat használnak.
4. Osztálynév — .create-project-button. Elfogadható stabil osztálynevű dizájnrendszer-komponensekhez. Kerüld a segédprogramosztályokat, mint a .flex vagy .mt-4 — ezek tucatnyi elemet egyeznek.
5. Szerkezeti szelektor — header nav ul li:first-child a. Törékeny — megszakad, amikor a DOM szerkezet változik.

Mi történik, ha az elem nem található

Ha a Yaplet nem találja a szelektor által meghatározott elemet az oldalon, amikor a bemutatolépés aktiválódik:

• A lépés egy középre igazított modal pozícióba esik vissza — a tooltip a képernyő közepén jelenik meg nyíl nélkül.
• A bemutató normálisan folytatódik a következő lépéssel.

Ez azt jelenti, hogy egy törött szelektor szabályosan romlik le ahelyett, hogy összeomlana a bemutató. De a lépés rosszul fog kinézni, ezért figyeld a bemutató analitikáját, és frissítsd a szelektorokat azonnal a felhasználói felületi változtatások után.

Dinamikus elemek kezelése

Néhány felhasználói felületi elem csak egy interakció után jelenik meg — egy legördülő menü, amely kattintás után nyílik meg, egy panel, amely navigáció után töltődik be. Ezeknél:

• Használj Hivatkozásos lépést a mutató lépés előtt a helyes oldalra való navigáláshoz.
• Adj hozzá késleltetést a kiváltóhoz másodpercben, hogy a lépés az animációk befejezte után induljon el.
• Ha az elem lustán töltődik be, fontolj meg egy data attribútumot, amelyet a konténer akkor ad a DOM-hoz, amikor renderelődik — akár a lusta betöltés befejezte előtt is.

Szelektorok frissítése felhasználói felületi változás után

Amikor kiszállítasz egy olyan felhasználói felületi frissítést, amely elemeket mozgat vagy átnevez:

1. Nyisd meg az érintett bemutatót a dashboardon.
2. Kattints végig a módosított elemeket célzó lépéseken.
3. Frissítsd a CSS-szelektor az új jelöléssel való egyezéshez.
4. Használd az Előnézet gombot a nyíl helyes irányulásának ellenőrzéséhez mentés előtt.

Mi a következő lépés?

Miután a lépéseid megfelelően rögzítve vannak, ellenőrizd, hogy a bemutató jól néz-e ki kisebb képernyőkön is: Reszponzív bemutató töréspontok között.