# Komponensek

> Újrahasználható elemek a Bricks-ben: létrehozás, tulajdonságok, változatok, helykitöltők (slotok), kezelés és leválasztás.

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.

![A Komponensek fül a szerkesztő panelén (még nincs komponens)](./kepek/sablonok-2-komponensek-lap.webp)

*A Komponensek fül a szerkesztő panelén (még nincs komponens)* (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](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-sablon-slot/) 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](https://hub.hellowp.io/hu/plugins/bricks-child/sablonok-oldalsavok-globalis-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.