# Komponensek: létrehozás és vezérlők

> A komponensek áttekintése: a Listázások/komponensek lista, a komponens létrehozása, a tartalmi és stílusvezérlők szerkesztése Elementorban, a blokkszerkesztőben, Bricksben és Timber/Twigben.

A komponens egy saját widget, blokk vagy elem, amelyet egyszer felépítesz, majd bárhol újra felhasználsz. Egy fejlesztő például elkészít egy kártyát, és eldönti, milyen vezérlői legyenek: szöveg, kép, szín. Ezután az oldalakat szerkesztők a kész komponenst a saját tartalmukkal töltik ki.

A komponens felépíthető a blokkszerkesztővel (Gutenberg), Elementorral, Bricksszel vagy Timber/Twiggel. Kész állapotban az Elementorral, a blokkszerkesztővel és a Bricksszel készült oldalakon és sablonokban használható.

## A Listázások/komponensek lista

A komponensek a **JetEngine → Listázások/komponensek** oldalon vannak, a listázási sablonok mellett, közös listában. A lista felett az **Összes**, a **Listázási elemek** és a **Komponensek** szűrő látható, mellettük az elemek számával.

![A Listázások/komponensek lista az „Új elem hozzáadása” és az „Új komponens hozzáadása” gombbal](./kepek/adattarolo-1-komponensek-lista.webp)

*A Listázások/komponensek lista az „Új elem hozzáadása” és az „Új komponens hozzáadása” gombbal* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine)

A lista felett két gomb van: az **Új elem hozzáadása** a listázási sablonhoz, az **Új komponens hozzáadása** a komponenshez tartozik.

## Új komponens létrehozása

1. Kattints az **Új komponens hozzáadása** gombra.
2. A **Komponens neve** mezőbe írd be a nevet. Ez lesz a generált widget, blokk vagy elem neve.
3. A **Komponens nézete** listában válaszd ki, mivel építed fel a komponenst: **Elementor**, **Bricks**, **Timber/Twig** vagy **Blokkok (Gutenberg)**.
4. Kattints a **Komponens létrehozása** gombra.

![A Komponens beállítása ablak a névvel és a komponens nézetével](./kepek/adattarolo-1-komponens-popup.webp)

*A Komponens beállítása ablak a névvel és a komponens nézetével* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine)

A nézetek csak akkor jelennek meg a listában, ha a hozzájuk tartozó bővítmény vagy téma telepítve és aktív. A **Timber/Twig** választásához a **JetEngine → JetEngine → Teljesítmény** fülön be kell kapcsolni a Timber/Twig nézetek kapcsolót.

![A blokkszerkesztőben megnyitott komponens: a Beállítások panelen a két vezérlőgomb, alatta a Komponens CSS](./kepek/adattarolo-1-komponens-szerkeszto.webp)

*A blokkszerkesztőben megnyitott komponens: a Beállítások panelen a két vezérlőgomb, alatta a Komponens CSS* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=edit)

A kép a blokkszerkesztős komponens szerkesztőjét mutatja. A jobb oldali panelen a **Beállítások** alatt a két vezérlőgomb, lejjebb a **Komponens CSS** található.

## A vezérlők fajtái

Egy komponensnek két vezérlőcsoportja van: tartalmi és stílusvezérlők. Ezeket a szerkesztő felhasználó a komponens használatakor a widget beállításai között látja.

### Tartalmi vezérlők

| Beállítás | Mit csinál |
|---|---|
| **Control Label** | A vezérlő felirata, amely a komponens widgetének (blokkjának, elemének) beállításai között jelenik meg. |
| **Control Name** | A vezérlő neve, amely az adatbázisba mentődik. A komponensen belül egyedi kell legyen a stílusvezérlőkkel együtt, és csak kisbetűt, számot és alsó vonalat tartalmazhat. |
| **Control Type** | A vezérlő típusa: **Szöveg**, **Szövegmező**, **Formázott szöveg**, **Kiválasztás** vagy **Egyetlen média**. A **Kiválasztás** típusnál egy extra mezőben megadhatod az opciókat. |
| **Default Value** | Az alapértelmezett érték. |

A **Kiválasztás** opcióit soronként egy tétel adja meg, a címke és az érték között `::` jellel, például `red::Piros`.

![A Tartalmi vezérlők ablak a blokkszerkesztőben, egy új, üres tétellel](./kepek/adattarolo-1-komponens-tartalomvezerlok.webp)

*A Tartalmi vezérlők ablak a blokkszerkesztőben, egy új, üres tétellel* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=edit)

A kép a blokkszerkesztő tartalmivezérlő-ablakát mutatja: a **Save Controls** gomb menti a vezérlőket, az **Add new item** új tételt ad hozzá.

### Stílusvezérlők

Jelenleg csak a színvezérlők támogatottak. Három beállításuk van: a **Control Label**, a **Control Name** (ugyanazokkal a szabályokkal, mint a tartalmi vezérlőnél) és a **Default Value**. Blokkszerkesztőben az alapértéket hexadecimális színkódként add meg (például `#0DC167`).

## Vezérlők szerkesztése nézetenként

### Elementor

1. Add hozzá a widgeteket az oldalhoz, amelyeket vezérelni szeretnél.
2. A bal alsó sarokban kattints a fogaskerék ikonra a komponens beállításaihoz. Három fül van: **Általános beállítások**, **Component Content Controls** és **Component Style Controls**.
3. Az általános fülön megváltoztathatod a komponens **Címét** és az **Állapotát** (**Piszkozat**, **Jóváhagyásra vár**, **Privát**, **Közzétéve**).
4. A tartalmi vezérlők fülön alapból egy szövegvezérlő van. A tételek mellett duplikáló és törlő ikon látható. Új tételt az **Add Item** gombbal adhatsz hozzá.
5. A stílusvezérlők fülön az **Add Item** gombbal hozhatsz létre színvezérlőt.

### Blokkszerkesztő (Gutenberg)

A komponens beállításai az **Item/Component** fül **Beállítások** paneljén vannak.

- **Add/Edit Content Controls:** megnyitja a tartalmi vezérlők ablakát. Az **Add new item** gombbal adhatsz hozzá tételt, a **Save Controls** gombbal mentheted a vezérlőket.
- **Add/Edit Style Controls:** ugyanilyen ablak a stílusvezérlőknek.
- **Komponens CSS:** itt adhatsz meg CSS-szabályokat a komponenshez. A felvett stílusvezérlők a szövegmező alatt jelennek meg, és a CSS-kódban felhasználhatók.

### Bricks

1. A **JetEngine → Listázások/komponensek** oldalon vidd az egeret a komponens fölé, és kattints az **Edit component** gombra.
2. Az ablakban a **Content Controls** és a **Style Controls** fülön ugyanazok a beállítások vannak, mint fent.
3. Kattints a **Save & Go To Editor** gombra, és a szerkesztőben add hozzá az elemeket.

### Timber/Twig

A Timber szerkesztőben kattints a **Settings** gombra. Az ablak két fülén (**Content Controls**, **Style Controls**) a **New Control** gombbal adsz hozzá vezérlőt. A stílusvezérlők **Default Value** mezőjében használhatsz egyéni színt vagy az Elementor globális színeit: ehhez a mező alatti **Use CSS Variable** gombbal választhatsz értéket.

### Közvetlenül a vezérlőpulton

A vezérlők a **JetEngine → Listázások/komponensek** oldalon is szerkeszthetők: vidd az egeret a komponens fölé, és kattints az **Edit Component** gombra. Az ablakban a tartalmi és a stílusvezérlők ugyanazokkal a beállításokkal elérhetők.

## A vezérlők hozzárendelése az elemekhez

A vezérlő csak akkor működik, ha a hozzá tartozó elemhez is hozzárendeled.

### Elementor

1. Nyisd meg a vezérlendő widget beállításait.
2. Kattints a dinamikus címkék ikonra, és válaszd a **Component Control Value** (szöveghez), a **Component Control Image** (képhez) vagy a **Component Control Color** (színhez) címkét.
3. A **Control Name** mezőbe írd be a komponens beállításaiban megadott nevet.

Másik lehetőség: a widget **Forrás** listájában a **Component Control Value** értéket választod, és a következő mezőbe írod a vezérlő nevét.

### Blokkszerkesztő

1. A blokk mezője fölött kattints a **Dynamic Tags** gombra.
2. Az **Adatforrás** fülön válaszd a **Custom data** forrást, a **SELECT DATA TO SHOW** listában pedig a **Component Control Value** értéket.
3. Add meg a **CONTROL NAME** értéket. Ha képvezérlőt rendelsz hozzá, kapcsold be az **Is Image** kapcsolót, és állítsd be a kép megjelenítését.

Közvetlenül a blokk beállításaiban is megteheted: a **Dynamic Image** blokknál válaszd a **Component Control Value** forrást, és add meg a vezérlő nevét az **OR SET MANUALLY** mezőben.

### Bricks

1. Az elem beállításainál kattints a **Dynamic Data** gombra.
2. Válaszd ki a létrehozott vezérlőt. Ismételd meg ezt minden vezérelt elemnél.
3. A stílusvezérlőket a **STÍLUS** fülön rendeled hozzá. A háttérszín esetén a **BACKGROUND** részben kattints a csepp ikonra, válaszd a **RAW** opciót, és kattints a **Dynamic Data** gombra, majd válaszd ki a stílusvezérlőt.

### Timber/Twig

1. A HTML-részben kattints a **Dynamic data** gombra, és válaszd a **Component Control Value** makrót.
2. Adj meg **Control Name** értéket, és szükség esetén kapcsold be az **Is Image** kapcsolót.
3. A beszúráshoz kattints az **Insert** gombra.
4. A stílusvezérlőket a CSS-kódba a **var()** gombbal illesztheted be.

## A komponens használata a szerkesztőben

A kész komponenst a szerkesztő keresőjében a nevével találod meg: Elementorban a widgetek között, a blokkszerkesztőben a blokkok között, Bricksben az elemek között. A tartalmi és stílusvezérlők a widget **Tartalom** és **Stílus** fülén jelennek meg.

A **Formázott szöveg** vezérlő a blokkszerkesztőben másképp működik: Elementorban és Bricksben a szöveget már a komponens létrehozásakor megadhatod, a blokkszerkesztőben pedig a komponens oldalon való használatakor. Ehhez kattints a **Formázott szöveg** neve melletti **Edit HTML** gombra, illeszd be a szöveget (lehet benne link, dőlt vagy félkövér rész is), és mentsd a **Done** gombbal.

A komponens felhasználási példái: [komponens Elementorban](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-komponens-elementor-peldaja/), [a komponens környezete](https://hub.hellowp.io/hu/plugins/jet-engine/adattarolo-komponens-kontextus/), [komponens a Query Loopban és a Listing Gridben](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-komponensek-listazasban/), [adatok lekérése komponenssel](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-komponens-adatok/).