Interakciók

Az interakciók műveletet futtatnak, ha a weboldalon (frontenden) történik valami. Egy egyszerű interakció kattintásra megmutat egy rejtett elemet. Egy összetettebb figyelhet lekérdezés-AJAX eseményt, ellenőrizheti a böngészőtárolót, AJAX-os felugró ablakot tölthet be a megfelelő bejegyzés-környezettel, vagy saját JavaScript-függvényt hívhat.

Az interakció három fő részből áll:

• Eseményindító: az esemény, amelyet a Bricks figyel, például kattintás, tartalom betöltése, görgetés, belépés a nézetablakba, sikeres űrlapküldés vagy lekérdezés-AJAX vége.
• Művelet: a viselkedés, amelyet a Bricks lefuttat, például megjelenítés, elrejtés, osztály átváltása, elemhez görgetés, felugró ablak megnyitása, további találatok betöltése vagy JavaScript-függvény futtatása.
• Cél: a művelet által érintett elem. A műveletől függően ez lehet maga az elem, egy CSS-választó vagy egy felugró ablak sablonja.

Az interakciók megnyitása

Elem szerkesztésekor kattints a panel fejlécében az Interakciók ikonra az interakciók felületének megnyitásához vagy bezárásához. Ha egy elemnek vannak interakciói, ugyanez az ikon a Szerkezet panelen is megjelenik. Rákattintva az elem interakcióihoz jutsz.

Interakció hozzáadása

Kattints az Interakciók cím melletti „+” (Hozzáadás) ikonra. Egy elemhez több interakciót is adhatsz. Az interakció címére kattintva átnevezheted.

https://minta-bolt.hu/elemek-teszt/?bricks=run

A képen az új interakció mezői láthatók: az ID, az Eseményindító (itt Kattintás), a Kikapcsolás: preventDefault kapcsoló, a Művelet, a Cél, a Csak egyszer futtasd kapcsoló, valamint a Feltételek a Hozzáadás feltétel gombbal és a Kapcsolat (És) választóval.

Minden interakció saját azonosítót kap. A Bricks belsőleg használja, te pedig kimásolhatod, ha egy másik interakciónak egy adott animáció végét kell figyelnie.

Eseményindítók

Az Eseményindító azt határozza meg, mikor fusson az interakció.

Elemindítók

Az elemindítók a forráselemen figyelnek:

• Kattintás
• Rámutatás
• Fókusz
• Elmosás
• Egér belépése
• Egér kilépése
• Belépés a nézetablakba
• Kilépés a nézetablakból
• Animáció vége
• Lekérdezés AJAX-betöltő (Indítás) / (Vége)
• Szűrés elküldése (Indítás) / (Vége)
• Űrlap Küldés, Űrlap Sikeres, Űrlap Hiba

A kattintásos interakciók alapból meghívják az event.preventDefault()-ot. Ha azt szeretnéd, hogy a kattintott elem megtartsa a normál böngészőviselkedését (például kövesse a hivatkozást), kapcsold be a Kikapcsolás: preventDefault beállítást.

Nézetablak-indítók

A Belépés a nézetablakba és a Kilépés a nézetablakból az interakció forráselemét figyeli. Mindkettőnél van egy Elem láthatósága beállítás, amely megadja, mekkora részének kell átlépnie a nézetablak határát:

• 0%: a belépés akkor fut, ha az elem bármely része láthatóvá válik. A kilépés akkor, ha az elem már egyáltalán nem látszik.
• 50%: a belépés akkor fut, ha az elem fele látható. A kilépés akkor, ha elérte ezt a mértéket, és a látható része fél alá csökken.
• 100%: a belépés akkor fut, ha az egész elem látható. A kilépés akkor, ha már nem látszik teljesen.

Az alapérték 0%. A 0 és 100 közötti értékek támogatottak. Az elemnek bele kell férnie az aktív nézetablak-területbe, hogy elérje a 100%-ot, ezért a nézetablaknál magasabb vagy szélesebb elemeknél használj kisebb értéket.

A Belépés a nézetablakba támogatja a Gyökérmargó (root margin) beállítást is. Ez az aktív nézetablak határát módosítja, míg az Elem láthatósága azt, mekkora részének kell az elemnek átlépnie ezt a határt. Például az 0px 0px -50% 0px alsó gyökérmargó az alsó határt a nézetablak közepére viszi. A Kilépés a nézetablakból nem használ gyökérmargót.

A megfigyelt elem a forráselem marad. Ha egy másik elemet akarsz animálni vagy módosítani, amikor a forrás átlépi a határt, válaszd célnak a CSS-választót, és add meg annak az elemnek a választóját.

Böngésző- és ablakindítók

Ezek nem egyetlen elem eseményéhez kötődnek:

• Görgetés
• Tartalom betöltve
• Egér kilépése az ablakból

A Görgetés indító görgetési eltolást fogad: pixelt, a dokumentum magasságához viszonyított százalékot vagy a nézetablak magasságához viszonyított vh értéket. A Tartalom betöltve késleltetést fogad, például 500ms vagy 1s.

A Csak egyszer futtasd vezérlő a legtöbb indítónál elérhető, a Tartalom betöltve indítónál nem.

Lekérdezésszűrő-indítók

Ha a lekérdezésszűrők be vannak kapcsolva, a Bricks két további indítót ad: Szűrő: üres és Szűrő: nem üres. Ezek egy adott szűrőelem azonosítóját figyelik. Megadhatod a Bricks nyers azonosítóját, #id-t vagy #brxe-id-t, a Bricks összehasonlítás előtt egységesíti.

A támogatott szűrőtípusok: Aktív szűrők, Jelölőnégyzet, Dátumválasztó, Választógomb, Tartomány, Keresés, Kiválasztás. Az Aktív szűrőknél, Jelölőnégyzetnél, Választógombnál és Kiválasztásnál a Bricks azt nézi, vannak-e elérhető lehetőségek vagy értékek. A Kiválasztásnál a helyőrző lehetőséget, a Jelölőnégyzetnél és Választógombnál az „Összes” lehetőséget nem számítja. A Dátumválasztónál és Keresésnél azt vizsgálja, üres-e az aktuális érték. A Tartománynál azt, hogy a kiválasztott tartomány eltér-e a szűrő minimum és maximum értékétől.

WooCommerce-indítók

Aktív WooCommerce esetén a Bricks WooCommerce-indítókat ad:

• Kosárba helyezve
• Kosárba helyezés
• Eltávolítva a kosárból
• Megváltozott a Bricks kosártartalma
• Kosár frissítve
• Kupon alkalmazva
• Kupon eltávolítva
• Frissültek a Bricks dinamikus töredékei
• Megváltozott a Bricks pénztárlépése

A hagyományos WooCommerce-indítók a WooCommerce frontend jQuery eseményeit figyelik. A Megváltozott a Bricks kosártartalma, a Frissültek a Bricks dinamikus töredékei és a Megváltozott a Bricks pénztárlépése a Bricks saját eseményeit figyeli.

Megváltozott a Bricks kosártartalma

Ezzel egyéni értesítést vagy felugró ablakot mutathatsz egy sikeres AJAX-os hozzáadás, eltávolítás vagy mennyiségváltoztatás után. Lefedi a kosár, a Pénztár v2, a minikosár és a Kosártartalom ciklus frissítéseit, a Dinamikus töredékekben lévő ciklusokat is.

Az indító azután fut, hogy a szerver megerősítette a tételváltozást, és a kapcsolódó kosár-, pénztár- és töredékfrissítések lefutottak. Ha egy változáshoz több frissítési kérés kell, is egy értesítést ad. Az egymástól független, megerősített változások külön-külön adnak értesítést, még ha a frissítésük össze is vonódik.

Nem fut:

• az első oldalbetöltéskor vagy a gyorsítótárazott kosártartalom szinkronizálásakor,
• ha úgy küldöd el a mennyiséget, hogy az érték nem változott,
• sikertelen kérésnél vagy sikertelen kapcsolódó felületfrissítésnél,
• kupon-, szállítás-, cím- vagy csak végösszeg-újraszámításnál.

A WooCommerce-nek aktívnak kell lennie. Az indítóhoz nem kell a haladó moduláris elemek bekapcsolása vagy Dinamikus töredék az oldalon. A támogatott AJAX-os kosárfrissítéseket figyeli, ezért a sima oldalújratöltés vagy egy harmadik féltől származó egyéni kosárkérés nem garantáltan váltja ki.

Válaszd azt az indítót, amelyik a kívánt viselkedéshez illik:

Indító	Mikor használd
Megváltozott a Bricks kosártartalma	Megerősítés mutatására, miután egy tétel sikeresen bekerült, eltávolításra került vagy megváltozott a mennyisége.
Kosárba helyezve	Csak az AJAX-os hozzáadásra reagálsz, például egy minikosár Offcanvas átváltására.
Kosár frissítve	A WooCommerce updated_cart_totals eseményére reagálsz. Ez nem általános megerősítés minden kosártétel-változásról, különösen a pénztárnál nem.
Frissültek a Bricks dinamikus töredékei	Művelet a Dinamikus töredék tartalmának cseréje után. Előfordulhat az első szinkronizálásnál vagy pénztári újraszámításnál is, tételváltozás nélkül.

A „Kosár frissítve” felugró ablak elkészítése:

1. Hozz létre egy felugró ablak sablont a megerősítő üzenettel és egy bezáró vezérlővel.
2. Egy olyan elemen, amely a releváns oldalakon megjelenik, nyisd meg az Interakciók felületet, és adj hozzá egy interakciót.
3. Az Eseményindító legyen Megváltozott a Bricks kosártartalma.
4. A Művelet legyen Elem megjelenítése, a Cél Felugró ablak, és válaszd ki a sablont.
5. A Csak egyszer futtasd maradjon kikapcsolva, ha a felugró ablaknak minden megerősített változás után meg kell jelennie.

Próbáld ki a weboldalon: adj hozzá terméket, változtasd meg a mennyiséget, majd távolítsd el. Változtatások között zárd be a felugró ablakot. Töltsd újra az oldalt, vagy csak a pénztári címet módosítsd, és ellenőrizd, hogy a felugró ablak zárva marad.

Műveletek

A Művelet az, amit a Bricks lefuttat, miután az indító átment a feltételeken.

• Elem megjelenítése
• Elem elrejtése
• Kattintás az elemre
• Attribútum beállítása
• Attribútum eltávolítása
• Attribútum átváltása
• Offcanvas átváltása
• Továbbiak betöltése (Lekérdezési ciklus)
• Továbbiak betöltése (Képgaléria)
• Animáció indítása
• Görgetés ide
• Pénztári lépés
• JavaScript (Függvény)
• Open address (Térkép) és Close address (Térkép)
• Űrlap kiürítése
• Böngészőtároló: Hozzáadás
• Böngészőtároló: Eltávolítás
• Böngészőtároló: Darabszám

Az Elem megjelenítése és az Elem elrejtése működhet normál elemeken és felugró ablak sablonokon is. Normál elemeknél a Bricks a soron belüli display stílust módosítja. Felugró ablakoknál a felugró ablak megnyitási/zárási logikáját hívja.

Az Attribútum beállítása, eltávolítása és átváltása a kijelölt célon működik. Ha az attribútum kulcsa class, a Bricks az osztályneveket a classList-en keresztül adja hozzá, távolítja el vagy váltja át. Minden más esetben magát az attribútumot állítja vagy távolítja.

A Kattintás az elemre művelet minden célelemen meghívja a .click() függvényt. Hasznos, ha egy felületi vezérlőnek egy másik, már létező vezérlőt kell működésbe hoznia.

Az Űrlap kiürítése törli a beviteli mezőket, szövegterületeket, legördülő listákat, jelölőnégyzeteket, választógombokat és a látható fájlkiválasztás-eredményeket. A rejtett mezőket nem üríti. Ha az interakciót Űrlap Küldés, Űrlap Sikeres vagy Űrlap Hiba indítja, a Bricks a megfelelő űrlapot üríti. Egyébként megadhatsz célűrlap-választót; ha nem adsz meg választót, az oldal összes űrlapját üríti.

A térképes műveletekkel a Térkép/Információs doboz felugró ablakokat és a címinterakciókat kezelheted.

Célok

A legtöbb művelet a következő célmódok egyikét használja:

• Saját: a forráselemen fut.
• CSS-választó: minden, a választóra illeszkedő elemen fut.
• Felugró ablak: a kiválasztott felugró ablak sablonon fut.

Az elemválasztót vagy azonosítót váró célmezőknél használd a mező melletti másolás gombot, majd kattints jobb gombbal a célelemre a vásznon vagy a Szerkezet panelen, és válaszd a felkínált másolási műveletet. A választómezők az elem CSS-azonosítóját másolják #-tel; az űrlap- és szűrőeseménymezők a Bricks belső azonosítóját. Az Esc megnyomásával a másolás nélkül kilépsz ebből a módból.

Egyes műveletek nem használják a szokásos célvezérlőt, mert saját célmezőjük van, vagy nincs célja. Ilyen a továbbiak betöltése, a böngészőtároló, az Offcanvas átváltása, a térképes műveletek és az űrlap kiürítése.

Ha egy felugró ablakos interakció lekérdezési cikluson belül van, a Bricks először a kiválasztott felugró ablak sablonazonosítója és az aktuális ciklustétel azonosítója alapján próbál felugró ablakot találni. Ha nincs ciklustételhez tartozó felugró ablak, a sablonazonosítóra tér vissza.

Csak egyszer futtasd

Kapcsold be a Csak egyszer futtasd beállítást, ha az interakciónak az aktuális oldalbetöltés alatt csak egyszer kell lefutnia. Normál elemeseményeknél a Bricks egyszeri eseményfigyelőt használ. Dokumentumszintű eseményeknél (űrlap, AJAX, felugró ablak, szűrő, WooCommerce) a Bricks nyomon követi, és a lefutás után eltávolítja az interakciót.

Az egyszeri futtatás csak az adott oldalbetöltésre érvényes, oldalbetöltések között nem tárolódik. Tartós vagy munkamenet-alapú szabályhoz használj böngészőtároló-műveleteket és interakciófeltételeket.

Művelet: Görgetés ide

A Görgetés ide a célelemhez viszi az oldalt. Beállításai:

• Eltolás (px): a célpozícióból levon ennyi pixelt.
• Késleltetés (ms): ennyit vár a görgetés előtt. A Bricks alapból kis késleltetést használ, hogy a DOM frissülhessen.

Példa: miután a „Posts Query” AJAX-hívás befejeződik, az oldal a #my-grid-wrapper CSS-választójú elemhez görget, előtte 500 milliszekundumot várva.

Művelet: Pénztári lépés

A Pénztári lépés művelet a WooCommerce Pénztár v2 többlépéses elrendezéseihez érhető el. A pénztári folyamatot a következőre mozgathatja:

• következő lépés,
• előző lépés,
• egy adott lépés,
• egy adott pénztári mező.

Kapcsold be a Nézetbe görgetés lehetőséget, ha azt szeretnéd, hogy a művelet a lépésváltás után a célként megadott lépést vagy mezőt a látótérbe görgesse. A Pénztár v2 a Megváltozott a Bricks pénztárlépése indítót is hozzáadja, amely az aktív pénztári lépés megváltozása után fut. A pénztár beállításairól lásd Pénztár v2.

Művelet: Offcanvas átváltása

Az interakciók bármelyik elemről átválthatnak egy Offcanvas elemet. Állítsd a műveletet Offcanvas átváltása-ra, és add meg az Offcanvas CSS-választóját, például #brxe-off123. Ne alkalmazd ezt a műveletet közvetlenül magán a Kapcsoló elemen.

Böngészőtároló

A böngészőtároló-műveletek egy kulcsot írnak, törölnek vagy számolnak:

• Ablaktároló (window): a window objektumban tárolódik, oldalbetöltéskor alaphelyzetbe áll.
• Munkamenet-tároló (session): a sessionStorage-ban tárolódik, általában a böngészőlap vagy munkamenet végén törlődik.
• Helyi tároló (local): a localStorage-ban tárolódik, a törlésig megmarad.

A tárolóműveletek ugyanazt a Kulcs mezőt használják, mint az attribútumműveletek:

• Böngészőtároló: Hozzáadás a beállított értéket írja a kulcsba.
• Böngészőtároló: Eltávolítás eltávolítja a kulcsot.
• Böngészőtároló: Darabszám számként olvassa a kulcsot (alapértelmezés 0), eggyel növeli, és eltárolja az eredményt.

A tároló főleg az interakciófeltételekkel együtt hasznos. Az egyik interakció például számolhatja, hányszor kattintottak egy gombra, egy másik pedig csak akkor fut, ha a számláló nagyobb, mint 2.

Művelet: JavaScript (Függvény)

Az interakciók saját JavaScript-függvényeket is futtathatnak. Definiáld a függvényeket globálisan:

<script>
window.myHelperFunctions = {}

myHelperFunctions.myCall = () => {
  console.log('myCall executed')
}

myHelperFunctions.nestedFn = {
  fn1: () => {
    console.log('fn1 executed')
  },
  fn2: () => {
    console.log('fn2 executed')
  }
}

function toggleMiniCart() {
  const run = () => {
    document.querySelector('.bricks-woo-toggle').dispatchEvent(new Event('click'))
  }

  setTimeout(run, 100)
}
</script>

A Függvény neve (JavaScript) mezőbe a függvény nevét írd zárójelek és window. nélkül:

• myHelperFunctions.myCall
• myHelperFunctions.nestedFn.fn1
• myHelperFunctions.nestedFn.fn2
• toggleMiniCart

A fenti példából a run() nem hívható, mert a toggleMiniCart() belsejében van, nem a window-n.

Függvényargumentumok

Az Argumentumok ismétlővel értékeket adhatsz át a függvénynek. A %brx% helyőrző egy Bricks-objektumot ad át az interakció környezetével:

• source: az interakciót kiváltó forráselem.
• targets: a feloldott célelemek tömbje.
• target: az aktuális célelem ennél a függvényhíváskor.

function playOrPauseVideo(brxParam, postId) {
  const target = brxParam?.target || false

  if (!target) {
    return
  }

  const video = target.querySelector('video')

  if (!video || !video.play || !video.pause) {
    return
  }

  if (video.paused) {
    video.play()
  } else {
    video.pause()
  }
}

Interakciófeltételek

Az interakciófeltételekkel az interakció csak akkor fut, ha a böngészőtároló megfelel a szabályaidnak. A feltételek az ablaktárolót, a munkamenet-tárolót és a helyi tárolót támogatják. Minden feltétel egy tárolókulcsot vizsgál az alábbi összehasonlítások egyikével:

• létezik
• nem létezik
• ==
• !=
• >=
• <=
• >
• <

A számszerű összehasonlításoknál a Bricks a tárolt és az összehasonlító értéket számmá alakítja. A nem számszerű értékek ilyenkor 0-nak számítanak.

A Kapcsolat beállítás dönti el, hogy minden feltételnek teljesülnie kell (És), vagy elég, ha bármelyik teljesül (Vagy). Például az az interakció fut, ha a window.some_key értéke some_value.

Animációk

Az interakciók animációihoz a Bricks az Animate.css-t használja.

Művelet: Animáció indítása

Állítsd a műveletet Animáció indítása-ra, és válassz animációtípust, időtartamot és opcionálisan késleltetést.

Ha a cél felugró ablak, a Bricks az animációt a .brx-popup-content elemre alkalmazza. Ha az animáció neve tartalmazza az In szót, a Bricks megnyitja a felugró ablakot. Ha a felugró ablak tartalmának animációja Out-ot tartalmaz, az animáció végén bezárja.

A felugró ablakok animációi

A felugró ablakok a nyitási és zárási animációkat közvetlenül kezelik. Ha egy felugró ablakot animáció után akarsz megnyitni vagy bezárni, állítsd a műveletet Animáció indítása-ra, és válassz In vagy Out végű animációt. Nincs szükség második interakcióra, amely csak az animáció végét figyelné a felugró ablak megnyitásához vagy bezárásához.

Indító: Animáció vége

Az Animáció vége egy másik interakciót futtathat egy Animáció indítása művelet befejezése után. A Célinterakció azonosítója mezővel megadhatod, melyik animációs interakciót figyelje. Ha üresen hagyod, a Bricks ugyanazon interakciócsoport előző Animáció indítása interakcióját keresi. Ha a megadott azonosító az aktuális interakcióra vagy olyan interakcióra mutat, amely nem Animáció indítása, a Bricks figyelmen kívül hagyja.

Ugyanezt a JavaScript-eseményt te is figyelheted:

document.addEventListener('bricks/animation/end/xyyyeh', (event) => {
  const element = event.detail.el || false

  if (!element) {
    return
  }

  // Saját logika
})

A saját animációk hozzáadásáról lásd Egyéni animáció az interakciókhoz.

Lekérdezés AJAX-betöltő indítói

A Lekérdezés AJAX-betöltő (Indítás) és (Vége) a kiválasztott lekérdezés Bricks AJAX kezdő/záró eseményeit figyeli. Az Indítás a lekérdezés AJAX-kérésének elindulása előtt futtat műveletet, a Vége a befejezése után.

A Szűrés elküldése indítókat a Szűrő - Küldés elem AJAX-os beküldéseihez, vagy a Szűrő szűrés indítása interakciókat bekapcsoló Enter-gombos kereséshez használd.

Példa: halványítás AJAX-betöltés közben

1. Hozz létre rácselrendezést a lekérdezési ciklusodnak, és adj hozzá egy egyéni osztályt, amely 0.5 átlátszatlanságot állít be.
2. Adj hozzá egy interakciót, amely az osztályt hozzáadja, amikor az AJAX elindul.
3. Adj hozzá egy másikat, amely eltávolítja az osztályt, amikor az AJAX véget ér.

A mögöttes JavaScript-eseményt is figyelheted:

document.addEventListener('bricks/ajax/start', (event) => {
  const queryId = event.detail.queryId || false

  if (!queryId) {
    return
  }

  // Saját logika
})

Szűrés elküldése indítók

A Szűrés elküldése (Indítás) és (Vége) a Szűrő - Küldés elem AJAX-os beküldéseit figyeli a kiválasztott lekérdezésazonosítóhoz. Akkor is futnak, ha a látogató Entert nyom egy Szűrő - Keresés elemben, ha a Szűrő szűrés indítása interakciók be van kapcsolva. A sima gépelés nem futtatja őket.

• A Szűrés elküldése (Indítás) azután fut, hogy a Bricks frissítette a kiválasztott szűrőértékeket, és az AJAX szűrési kérés indulása előtt.
• A Szűrés elküldése (Vége) az AJAX szűrési kérés befejezése után fut.

A Lekérdezés vezérlőben válaszd ki a célzott lekérdezést. A Bricks csak akkor futtatja az interakciót, ha az esemény queryId-je egyezik a kiválasztott lekérdezéssel.

Hasznos, ha a szűrők mobilon egy Offcanvasban vannak: adj hozzá egy Szűrés elküldése (Vége) interakciót, amely bezárja az Offcanvast, és az a szűrési eredmények betöltése után fut. Ha az Offcanvasnak azonnal be kell záródnia, amikor a látogató a Küldés gombra kattint, használd a Szűrés elküldése (Indítás) indítót.

Ezek az indítók csak olyan AJAX-os szűrési beküldéseknél futnak, amelyek az aktuális oldal eredményeit frissítik. Nem futnak, ha a Küldés vagy Keresés elem másik URL-re irányít át. A kapcsolódó szűrőelemekről lásd Szűrő: küldés.

Űrlapindítók

Az interakciók a Bricks űrlapeseményeit is figyelhetik: Űrlap Küldés, Űrlap Sikeres, Űrlap Hiba.

• Űrlap Küldés: azután fut, hogy a Bricks előkészítette az űrlapadatokat, és az AJAX űrlapkérés elküldése előtt.

document.addEventListener('bricks/form/submit', (event) => {
  const elementId = event.detail.elementId
  const formData = event.detail.formData

  console.log('Element ID:', elementId)
  console.log('Form Data:', formData)
})

• Űrlap Sikeres: sikeres AJAX űrlapválasz után fut.

document.addEventListener('bricks/form/success', (event) => {
  const elementId = event.detail.elementId
  const formData = event.detail.formData
  const res = event.detail.res

  // Saját logika
})

• Űrlap Hiba: hibás AJAX űrlapválasz után fut.

document.addEventListener('bricks/form/error', (event) => {
  const elementId = event.detail.elementId
  const formData = event.detail.formData
  const res = event.detail.res

  // Saját logika
})

Az Interakciók panelen az űrlapindítónál add meg az Űrlap azonosítóját. A Bricks elfogadja az abcde, #abcde és #brxe-abcde formát, és az űrlapelem azonosítójához hasonlítja.

Indító: Szűrő: üres / nem üres

A Szűrő: üres és a Szűrő: nem üres akkor érhető el, ha a lekérdezésszűrők funkció aktív. Arra valók, hogy elrejtsd, megmutasd vagy más módon frissítsd a szűrőelemek körüli felületet, ha a szűrők lehetőségei vagy értékei az oldal első betöltése vagy egy lekérdezésszűrő-AJAX frissítés után kiürülnek.

A Szűrő: üres akkor fut, ha:

• az Aktív szűrők nem mutatnak tartalmat,
• a Jelölőnégyzetnek, Választógombnak vagy Kiválasztásnak nincs elérhető lehetősége (az „Összes” és a helyőrző nem számít),
• a Dátumválasztó vagy Keresés aktuális értéke üres,
• a Tartomány még a minimum/maximum alapértéken áll.

A Szűrő: nem üres akkor fut, ha:

• az Aktív szűrők tartalmat mutatnak,
• a Jelölőnégyzetnek, Választógombnak vagy Kiválasztásnak van elérhető lehetősége,
• a Dátumválasztónak vagy Keresésnek van aktuális értéke,
• a Tartomány eltér a minimum/maximum alapértéktől.

Példa: ha egy Szűrő - Kiválasztás nem ad vissza lehetőséget, rejtsd el a burkolóját, hogy ne maradjon üres vezérlő. Add hozzá a párját is, a Szűrő: nem üres interakciót, amely újra megmutatja a burkolót, amikor visszatérnek a lehetőségek.

Példa: felugró ablak megnyitása

Hírlevél-felugró ablak megnyitása a lábléc egy gombjáról:

1. Hozz létre egy „Hírlevél felugró ablak” nevű felugró ablak sablont.
2. Állítsd a sablon feltételeit arra, ahol elérhetőnek kell lennie, például Teljes webhely.
3. Adj egy gombot a láblécbe.
4. Adj a gombhoz Kattintás interakciót.
5. Állítsd a célt Felugró ablak-ra, válaszd ki a hírlevél sablont, és használd az Elem megjelenítése műveletet.

Ezután a gomb mindenhol megnyitja a felugró ablakot, ahol a sablon megjelenik.

Példa: egyéni tipp (tooltip) rámutatáskor

Hozz létre egy rejtett tippelemet, például egy Div-et .my-tooltip osztállyal, az Ikon elem közelében. Adj az ikonhoz két interakciót:

• Rámutatás vagy Egér belépése: a .my-tooltip megjelenítése.
• Egér kilépése: a .my-tooltip elrejtése.

Példa: egyéni kapcsológomb

Építhetsz egyéni kapcsológombot két Ikon elemből egy Div-ben. Adj a burkoló Div-nek .toggle-button egyéni osztályt, és használj ilyen CSS-t:

%root% .toggle-close-icon {
  display: none;
}

%root%.is-open .toggle-open-icon {
  display: none;
}

%root%.is-open .toggle-close-icon {
  display: block;
}

Az alapértelmezett ikon osztálya legyen .toggle-open-icon, az aktívé .toggle-close-icon. Ezután adj hozzá interakciókat:

• Az alapértelmezett ikonon: add hozzá az is-open osztályt a burkolóhoz.
• Az aktív ikonon: távolítsd el az is-open osztályt a burkolóról.