Komponensek

A komponensekkel újrahasználható elemeket hozol létre. Minden példány a tulajdonságokon keresztül testre szabható.

A sablonok oldalak tervrajzai, a komponensek egy adott elem vagy elemcsoport tervrajzai: például egy gombé, kártyáé, navigációé vagy hős szakaszé. Egy komponenst az egész webhelyen újrahasználhatsz, és csak ott szabod testre, ahol szükséges.

A fő komponensen végzett minden módosítás automatikusan érvényesül a komponens összes példányán. Így az ismétlődő szerkezetek és stílusok következetesek maradnak, miközben minden példány a saját tartalmát, lekérdezését, változatát vagy helykitöltő-tartalmát használhatja.

Hogyan működnek a komponensek?

A komponens egy mentett elemfa egyetlen gyökérelemmel. A Bricks a komponens definícióját az oldaltartalomtól külön tárolja. Az oldalon lévő minden példány a komponensazonosítón keresztül hivatkozik a definícióra, és csak a saját példányértékeit tárolja: a tulajdonság-felülírásokat, a kiválasztott változatot és a helykitöltő gyermekelemeit.

Az oldal megjelenítésekor a Bricks a hivatkozott definíciót beilleszti az oldalba, és alkalmazza a példányértékeket. Ha egy példány olyan komponensre hivatkozik, amely már nem létezik, a példányt az élő oldalon kihagyja.

Komponens létrehozása

A legtöbb elemből létrehozhatsz komponenst, kivéve a Sablon és a lekérdezésszűrő elemeket. Kattints jobb gombbal az elemre, és válaszd a Mentés komponensként műveletet. Új komponens létrehozásához kell a Komponensek létrehozása szerkesztői jogosultság.

A felugró ablakban add meg a komponens nevét (kötelező), kategóriáját és leírását (utóbbi kettő nem kötelező). A befejezéshez kattints a Létrehozás gombra.

Létrehozás után a kijelölt elem komponenspéldány lesz. A Bricks az eredeti elemfát a komponensdefinícióba mozgatja, az oldalon lévő elemet egy, a komponensre hivatkozó példányra cseréli, és a komponenst felveszi a komponenskönyvtárba.

Komponenskönyvtár

A komponenseidet a szerkesztő bal oldali paneljén, az Elemek fül melletti Komponensek fülön éred el. Innen egy komponenst húzással vagy kattintással a vászonra vagy a szerkezet panelre adhatsz, ugyanúgy, mint bármely más elemet.

https://minta-bolt.hu/template/fo-fejlec/?bricks=run

A képen a Komponensek fül látszik, tetején az információs, a beállítások és az importálás ikonnal. Komponens nélkül „Nincs találat.” üzenet áll ott.

A komponenseket a Böngészőből is kezelheted: nyisd meg a mappa ikonnal, és válaszd a Komponensek nézetet.

A Komponensek fülön ezeket a műveleteket végezheted:

• Importálás: komponens JSON- vagy ZIP-fájlok importálása másik telepítésből.
• Exportálás: a webhely összes komponensének exportálása JSON-fájlba. Egy konkrét komponens exportálásához vidd fölé az egeret, és kattints az exportálás ikonra.
• Törlés: a törlés ikonra kattintva törlési módba lépsz. Ott vidd az egeret a törölni kívánt komponens fölé, és kattints a törlés ikonra.
• Szerkesztés: nyisd meg a komponens tulajdonságpaneljét a komponens műveleti ikonjaival.
• Duplikálás: meglévő komponens másolatának létrehozása.
• Használat a blokkszerkesztőben: kapcsolóval állíthatod, hogy a komponens használható-e blokként a WordPress blokkszerkesztőben, ha a blokkszerkesztő-integráció be van kapcsolva.

A komponensműveletekhez külön szerkesztői jogosultságok tartoznak: komponensek beszúrása, létrehozása, törlése, a definíció szerkesztése, a példány tulajdonságértékeinek beállítása és a komponensek importálása/exportálása külön-külön jogosultság. Az azonos azonosítójú importált komponenseket a Bricks kihagyja. Az exportált komponens-JSON tartalmazza a komponens elembeállításaiban és osztálytulajdonságaiban használt globális osztályokat is.

Komponenskezelő a Böngészőben

A Böngésző Komponensek nézete szélesebb kezelőfelületet ad a meglévő komponensekhez. Ott:

• kereshetsz komponensek között,
• szűrhetsz kategória szerint,
• szűrhetsz használat szerint: minden használat, az aktuális oldalon használt, máshol használt vagy nem használt,
• válthatsz a rács- és a listanézet között,
• importálhatsz komponens JSON- vagy ZIP-fájlokat,
• szerkeszthetsz, duplikálhatsz, exportálhatsz, törölhetsz, vagy képernyőképet generálhatsz egy komponenshez,
• képernyőképet generálhatsz a jelenleg szűrt komponenslista összes elemére.

A komponens-képernyőképek generálásához a Komponensek szerkesztése jogosultság kell. A komponensek importálásához és exportálásához a Komponensek importálása/exportálása jogosultság szükséges. A Máshol használt szűrő csak azokat a komponenseket mutatja, amelyeket az aktuális oldalon nem, de másik oldalon vagy sablonban használsz.

A komponens-képernyőképek új telepítéseken alapból be vannak kapcsolva a Bricks → Beállítások → Sablonok és komponensek lapon (Saját komponenseim csoport, Komponens-képernyőképek kapcsoló). A kapcsoló kikapcsolása leállítja az automatikus és a kézi generálást, és elrejti a tárolt helyi bélyegképeket. A meglévő képernyőkép-fájlokat nem törli. Az összes generált komponens-képernyőkép eltávolításához ugyanebben a részben használd a képernyőképek törlésére szolgáló műveletet.

Példányszám és hely

A komponens neve alatt a példányszám látszik. A „Példányok: 3/6” például azt jelenti, hogy a komponens háromszor szerepel az éppen szerkesztett oldalon, és hatszor az egész webhelyen.

A Komponensek panelen vidd az egeret a komponens fölé, és kattints a földgömb ikonra: látni fogod a komponens összes példányát az aktuális oldalon, valamint azoknak a további oldalaknak a listáját, ahol a komponenst használod.

A Böngésző Komponensek nézetében kattints a példányjelvényre a használati felugró ablak megnyitásához. A felugró ablak szétválasztja az Aktuális oldal példányait és a Más oldalakat. Az aktuális oldal elemei a szerkesztőben a megfelelő példányra visznek. A más oldalak elemei a megfelelő oldalt vagy sablont új böngészőlapon nyitják meg a Bricks-ben.

Példányok: komponens újrahasználata

Ha egy komponenst hozzáadsz egy oldalhoz, a Bricks a komponens egy példányát hozza létre.

A fő komponens módosításai automatikusan megjelennek a komponens összes példányán az egész webhelyen. A példányspecifikus tulajdonságértékek, változatok és helykitöltő-tartalmak csak a kiválasztott példányt érintik.

A fő komponens szerkesztése

A fő komponens elemeinek megtekintéséhez és szerkesztéséhez, amely az összes példány forrása, kattints jobb gombbal bármelyik példányra, és válaszd a Komponens szerkesztése műveletet. Másik lehetőség: kattints a példány vezérlőpanelének fejlécében a fogaskerék ikonra, hogy belépj a komponensszerkesztő módba.

Ilyenkor a fő komponenst szerkeszted, amit a vezérlőpanel fejlécének lila színe jelez. A fő komponensen végzett módosítás a webhelyen a komponens összes példányára érvényes.

A fő komponens fejlécében ezek a műveletek érhetők el:

• Leírás (információs ikon): megjeleníti vagy elrejti a komponens leírását.
• Kategória (mappa ikon): megjeleníti vagy elrejti a komponens kategóriáját.
• Blokkszerkesztő (WordPress ikon): megjeleníti vagy elrejti a blokkszerkesztő beállításait, ha a komponens blokként engedélyezett.
• Változatok (rétegek ikon): megnyitja a változatok panelt.
• Tulajdonságok (doboz ikon): megnyitja a komponens tulajdonságpaneljét.
• Példány (nyíl ikon): kilép a komponensszerkesztő módból, és visszatér a korábban szerkesztett példányhoz vagy a Komponenskönyvtárba. Az Escape billentyű is kilép a fő komponensből.

A fő komponens szerkesztése közben a szerkezet panelen a komponens összes elemét látod és szerkesztheted. Például egy Kártya komponens címének módosításához jelöld ki a komponensen belüli Cím elemet, és írd át a szövegét „Csak egy kártya” szövegre. A Kártya komponens összes példánya automatikusan átveszi a változást.

Ez a közös szerkezethez és kinézethez hasznos. A komponensek igazi ereje abból jön, hogy a közös szerkezetet példányonként testre szabható tulajdonságokkal kombinálod.

Tulajdonságok

A tulajdonságokkal vezérlőket teszel elérhetővé minden példányon.

Egy Kártya komponens például elérhetővé tehet egy kártyacím- és egy kártyakép-tulajdonságot. Minden Kártya példány más tartalmat használhat, miközben ugyanazt a szerkezetet és stílust osztja.

Két lépésből áll:

1. Hozz létre egy tulajdonságot.
2. Kösd a tulajdonságot a komponensen belüli egy vagy több kompatibilis vezérlőhöz.

A tulajdonságdefiníciók létrehozásához és szerkesztéséhez a Komponensek szerkesztése jogosultság kell. A példányon a tulajdonságértékek beállításához a Tulajdonságok szerkesztése (példány) jogosultság szükséges.

1. Tulajdonság létrehozása

A tulajdonságpanel eléréséhez jelöld ki a szerkeszteni kívánt komponens egy példányát, majd kattints a bal oldali tulajdonság-vezérlőpanelen a szerkesztés ikonra.

Ha az aktuális oldalon nincs a komponensnek példánya, nyisd meg a Komponenskönyvtárat, vidd az egeret a komponens fölé, és kattints a szerkesztés ikonra.

Ha már a fő komponenst szerkeszted, a tulajdonságpanelt a panelfejléc doboz ikonjára kattintva éred el.

Tulajdonságtípusok

Ezek közül a tulajdonságtípusok közül választhatsz, és a komponensen belüli kompatibilis vezérlőkhöz kötheted őket:

Tulajdonságtípus	Köthető ehhez	Példa
Szöveg	Szöveg- és szövegmező-vezérlők	Cím vagy Alap szöveg
Formázott szöveg	Formázott szöveg vezérlők	Formázott szöveg vagy Harmonika tartalom
Ikon	Ikonvezérlők	Ikon vagy Ikondoboz elem
Kép	Képvezérlők	Kép vagy Logó elem
Képgaléria	Képgaléria vezérlők	Képgaléria vagy Körhinta elem
Hivatkozás	Hivatkozásvezérlők	Gomb vagy Cím hivatkozása
Kiválasztás	Kiválasztó, szöveg-, szövegmező- és formázott szöveg vezérlők	HTML-címke, Gombstílus
Kapcsoló	Jelölőnégyzet- és kapcsolóvezérlők	Elem elrejtése kapcsoló
Lekérdezési ciklus	Lekérdezésvezérlők	Elrendezés elemek
Globális osztályok	Globális osztályvezérlők	Elem globális osztályai

A tulajdonság neve kötelező. Válassz leíró nevet, főleg sok tulajdonságot tartalmazó, összetett komponenseknél.

A tulajdonság leírása nem kötelező, de segít a többi szerkesztőnek megérteni, hogyan kell használni a tulajdonságot.

A tulajdonság csoportja nem kötelező, és a példányvezérlő panelen belül rendezi a tulajdonságokat.

Az alapértelmezett tulajdonságérték nem kötelező. Akkor érvényesül, ha a példány nem állított be saját értéket. Ha egy példányérték törlődik vagy visszaáll, a Bricks eltávolítja a felülírást, így az alapértelmezett érték újra érvényesül.

2. Tulajdonság hozzákötése vezérlőhöz

A tulajdonság létrehozása után kösd ahhoz a vezérlőhöz, amelynek szerkeszthetőnek kell lennie a példányon.

A nem kötött tulajdonságok neve mellett megszakadt hivatkozás ikon látszik.

Szövegtulajdonság hozzákötése egy Cím elemhez:

1. Szerkeszd a fő komponenst.
2. Jelöld ki a komponensen belüli Cím elemet.
3. Keresd meg a szövegvezérlőt.
4. Kattints a lila + tulajdonság ikonra.
5. Válaszd ki a hozzákötni kívánt tulajdonságot.

A + ikonra kattintva megjelenik azoknak a tulajdonságoknak a listája, amelyek ehhez a vezérlőhöz köthetők. A kiválasztás után a vezérlő megmutatja a hozzákötött tulajdonság nevét.

Amikor egy példány módosít egy tulajdonságot, a Bricks a példányértéket az összes hozzákötött vezérlőre alkalmazza. Beágyazott komponenseknél a Bricks egy gyermekkomponens tulajdonságát a szülőkomponens tulajdonságához is kötheti.

A legtöbb kötött vezérlő egy nem osztály típusú tulajdonságot használhat. Kivétel a globális osztály típusú tulajdonság, amely más osztálytulajdonság-kötésekkel is kombinálható.

Tulajdonság leválasztása

A tulajdonság leválasztásához kattints a kötött tulajdonság beállítására, vidd az egeret a kötött tulajdonság neve fölé, és kattints a leválasztás ikonra.

Példány testreszabása

Jelölj ki egy komponenspéldányt, hogy testre szabhasd a fő komponens által elérhetővé tett tulajdonságokat. A példányvezérlők között csak a hozzákötött tulajdonságok jelennek meg.

Például:

• az egyik Kártya példány egyedi címet használhat,
• egy másik Kártya példány más képet,
• egy harmadik Kártya példány megtarthatja az alapértelmezett tulajdonságértékeket.

A példányon végzett módosítások nem érintik a fő komponenst és a többi példányt, csak a kiválasztottat.

Komponensek ciklusként és cikluson belül

A komponensek kompatibilisek a lekérdezési ciklusokkal. Bekapcsolhatsz ciklust a komponens gyökerén, vagy elhelyezhetsz egy lekérdezési ciklust a komponensen belül.

Példa: a Kártya komponens egy ciklusban szerepel, a kártya címe a post_title dinamikus adatcímkét, a kártya képe a featured_image címkét használja, így a ciklus eredményeinek bejegyzéscímét és kiemelt képét jeleníti meg.

A Lekérdezési ciklus tulajdonságtípussal minden komponenspéldány testre szabhatja a komponensen belüli lekérdezési ciklust.

Komponensváltozatok

A Bricks natív komponensváltozatokat támogat. A fő komponens szerkesztésekor nyisd meg a Változatok panelt, nevezd el az alapváltozatot, és adj hozzá egyéni változatokat. Ezután minden komponenspéldány kiválaszthatja ezek egyikét.

A natív változatokat hivatalos komponensállapotokhoz vagy dizájnokhoz használd. A változatspecifikus beállítások a komponensdefinícióban, a kiválasztott változat a példányon tárolódik.

Példák:

• elsődleges és másodlagos gombstílus,
• eltérő térközű kártyaelrendezések,
• ugyanazon komponens világos és sötét változata,
• kompakt és kibontott változat.

Rugalmasabb módosításhoz tegyél elérhetővé beállításokat komponenstulajdonságként.

Tulajdonság-alapú variációs minták

Az alábbi minták komponenstulajdonságokkal szabják testre az egyes példányokat. Akkor hasznosak, ha példányszintű választást akarsz, formális komponensváltozatok létrehozása nélkül.

Elemek megjelenítése vagy elrejtése

A szerkesztő elemek elrejtése funkciójával (a panelfejléc szem ikonja, vagy a helyi menü) elrejthetsz egy elemet. Hozz létre egy Kapcsoló tulajdonságot, és kösd a szerkesztőbeli és/vagy a frontend Elem elrejtése vezérlőhöz. Így példányonként mutathatsz vagy rejthetsz el elemeket a komponensen belül.

A frontend elrejtés nem csak CSS-trükk: az elrejtett frontend komponenselemek ki vannak zárva az élő oldal megjelenítéséből és beállításainak kimenetéből.

Globális osztályok

A Globális osztályok tulajdonságtípussal globális osztályokon keresztül hozhatsz létre stílusvariációkat. A komponens bármely elemén hozzárendelhetsz a példányon alapértelmezett és/vagy egyéni osztályokat.

Például hozz létre egy globális osztály tulajdonságot „Kicsi”, „Közepes” és „Nagy” egyéni opciókkal. Mindegyik opcióhoz más globális osztály tartozik, és több osztályt is hozzárendelhetsz. Nevezd el a tulajdonságot „Cím mérete” néven, és kösd a kiválasztott elem (itt a Cím) globális osztály vezérlőjéhez. Így a tulajdonság minden példányon elérhetővé válik, és például a „Nagy” opció hozzáadja a prop-text-lg globális osztályt a példány Cím eleméhez.

Egy elemhez tetszőleges számú globális osztály tulajdonságot köthetsz. Egyéni opciók megadásakor a címkét üresen hagyhatod, így a kiválasztott globális osztályok nevei látszanak. A felhasználóbarát címkék általában jobbak. Az opció globális osztályait bármikor módosíthatod: az újonnan kijelölt osztályok hozzáadódnak a példányhoz, ha az adott opció ki van választva.

Helyi osztályok

Ha nem globális osztályokkal dolgozol, használd a Kiválasztás tulajdonságtípust, hogy egyéni opciókat adj meg, majd a komponensen belül egy attribútumvezérlővel alkalmazd az osztályneveket.

Hozz létre egy Kiválasztás tulajdonságot osztályneveket tartalmazó opciókkal, kösd az attribútumérték vezérlőhöz. Ezután a példányon egy kattintással alkalmazhatod a helyi osztályt, például a color-red osztályt a komponensen belüli Cím elemre. Ha azt szeretnéd, hogy a felhasználók közvetlenül, szabadon írják be az osztályneveket, az attribútumértékhez Szöveg típusú vezérlőt is köthetsz.

Helykitöltők (Slotok)

A Sablon helykitöltő (Slot) elem lehetővé teszi, hogy a komponens helyet jelöljön ki példányspecifikus gyermekelemeknek. Add hozzá a Slotot a fő komponensben oda, ahová a példány tartalmának kerülnie kell, majd a komponenspéldányról adj hozzá elemeket a slothoz.

A fő komponensben a Slot csak helyőrző. Ha kijelölsz egy példányt, a Bricks virtuális slotterületeket mutat, ahová példányspecifikus gyermekelemeket adhatsz. Ezeket a példány tárolja, és csak annál a példánynál jelennek meg a slotban.

Slot hozzáadásához szerkeszd a fő komponenst, és jelöld ki azt az elemet, amely a példány tartalmát fogja tartalmazni. Komponensszerkesztés közben az Elemek panel a Komponens csoportban mutatja a Slot elemet, kattints rá a hozzáadáshoz. A slot elnevezéséhez kattints rá duplán a szerkezet panelen, például „Műveletek”. A példányok ezt a nevet látják a slotjukon.

Egy slot kitöltéséhez jelöld ki a példányt. A szerkezet panelen válaszd ki a slot sorát, és kattints egy elemre az Elemek panelen, húzz egy meglévő elemet a slot sorára, vagy kattints jobb gombbal a slot sorára és válaszd a Beillesztés műveletet. A slotban lévő elemek az oldal normál elemei, ugyanúgy szerkesztheted és stílusozhatod őket.

• A slot nem ad hozzá burkolóelemet. A Bricks csak a példány elemeit rendereli a helyén.
• Az üres slot nem ad ki semmit. A slotnak nincs alapértelmezett tartalma.
• Ha a fő komponensből törölsz egy slotot, a példányok által hozzáadott elemek nem jelennek meg többé.
• A blokkszerkesztőben a komponensblokkok nem támogatják a slotokat.

A Slot elemről az Elemek csoport egyik fejezete is szól.

Komponensek blokkként

A komponensek blokkként is használhatók a WordPress blokkszerkesztőben, ha a Gutenberg-integráció be van kapcsolva.

Komponens blokkként használata:

1. Kapcsold be a Gutenberg-integrációt a Bricks beállításaiban.
2. Engedélyezd a komponenst a blokkszerkesztőben.
3. Állítsd be a komponensblokk címét, kategóriáját, ikonját és előnézeti képét.
4. Szúrd be a komponenst a WordPress blokkszerkesztőből.

A blokkszerkesztő vezérlői a komponens azon tulajdonságaiból jönnek létre, amelyek a komponensen belüli vezérlőkhöz vannak kötve, a közvetlen és a beágyazott tulajdonságkötéseket is beleértve.

Komponens leválasztása

Egy példány komponensről való leválasztásához kattints jobb gombbal a példányra, és válaszd a Komponens leválasztása ikont a Komponens szerkesztése menüpont alatt.

Leválasztás után a példány már nem kötődik a fő komponenshez, és bármely más elemhez hasonlóan önállóan szerkeszthető.

Globális elem → komponens átalakító

A globális elemek elavultak, újat már nem hozhatsz létre, de a meglévőket komponensekké alakíthatod. A műveletről a Oldalsávok és globális elemek fejezet szól.

Komponensek adatmodellje

Az alábbi részletek azt magyarázzák, hogyan tárolja és jeleníti meg a Bricks a komponenspéldányokat:

• A komponensdefiníciók a Bricks komponensadataiban élnek, nem egyszerű, lemásolt gyermekelemekként minden oldalpéldányon.
• A komponensnek egy gyökérelemmel kell rendelkeznie. A gyökérelem azonosítója a komponens azonosítója.
• Az oldalpéldány a komponensazonosítón keresztül hivatkozik a komponensére.
• A példányspecifikus tulajdonságértékek a tulajdonságazonosító szerint a példányon tárolódnak.
• A komponens tulajdonságai definíciók. Egy tulajdonság csak akkor vezérel egy példányértéket, ha egy vagy több kompatibilis vezérlőhöz kötve van a komponensen belül.
• A változatválasztások a példányon élnek, a változatspecifikus beállítások a komponensdefiníción.
• A slot gyermekei a példányon élnek, nem a fő komponensdefinícióban.
• A hiányzó komponenshivatkozást érvénytelennek kell tekinteni. A Bricks kihagyja azokat a példányokat, amelyek komponensdefiníciója már nem létezik.

Jegyzetek és tippek

• A komponensek ismétlődő dizájnmintákhoz a legjobbak.
• A tulajdonságok a példányonként változó értékekhez a legjobbak.
• Használj kategóriákat a komponenskönyvtár rendben tartásához.
• Használj leírásokat, hogy a komponensek érthetőbbek legyenek a csapat és a későbbi karbantartás számára.
• A változatokat dizájn-előbeállításokhoz használd.
• A slotokat rugalmas belső tartalomhoz használd.
• Kis tartalmi eltéréseknél a komponens megkettőzése helyett használj komponenstulajdonságokat.
• Exportáld a fontos komponenseket, mielőtt törölnéd vagy alaposan módosítanád őket.
• A komponensek legyenek egyszerűek és célirányosak. A nagyon nagy komponenseket nehezebb karbantartani.