# Fülek elem

> A Fülek és a Fülek (Beágyazható elemek) beállításai: fülek, elrendezés, megnyitás, cím- és tartalomstílus.

A **Fülek** elem füles tartalmat készít. Két változata van:

- **Fülek:** a füleket ismétlődő listában adod meg (ikon, cím, azonosító, tartalom).
- **Fülek (Beágyazható elemek):** a füleket és a tartalmakat elemekként húzod be a szerkesztőben.

## Fülek

![A Fülek elem beállításai a szerkesztőben](./kepek/elemek-4-tabs.webp)

*A Fülek elem beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen a fülek listája, a **Hozzáadás fül** gomb, az **Elrendezés**, a **Harmonikaelrendezés...**, a **Fül megnyitása...** és a **Megnyitandó fül index** mező, majd a **Cím** és a **Tartalom** csoport látszik.

### Fülek mezői

| Mező | Mit csinál |
| --- | --- |
| Ikon | A fül opcionális ikonja. |
| Ikon pozíciója | Az ikon helye a szöveghez képest. Alapérték: bal. Csak megadott ikonnál érvényes. |
| Cím | A fül címe. |
| ID | Horgonyazonosító a fülre mutató linkekhez. Ne használj benne szóközt és kettőskeresztet (#). |
| Tartalom | A fül aktív állapotban látszó, formázható tartalma. |

### Általános beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Elrendezés** | A fülek iránya: vízszintes vagy függőleges. | Vízszintes |
| **Harmonikaelrendezés...** | Ennél a töréspontnál kisebb képernyőn a fülek harmonikává alakulnak. | Nincs |
| **Fül megnyitása...** | Mire nyíljon a fül: kattintásra (click) vagy ráhúzáskor (hover). | Click |
| **Megnyitandó fül index** | A betöltéskor kinyitott fül indexe, 0-tól számolva. | 0 |

### Cím

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Széthúzás | A címek kitöltik a rendelkezésre álló helyet (csak vízszintes elrendezésnél). | Ki |
| Igazítás | A címek vízszintes igazítása (csak vízszintes elrendezésnél). | Nincs |
| Kitöltés | A címek belső távolsága. | 20px mindenhol |
| Háttér | A címek háttere. | Nincs |
| Szegély | A címek szegélye. | 1px, `#dedede`, alul nincs |
| Tipográfia | A címek betűstílusa. | Nincs |
| Aktív háttér, Aktív szegély, Aktív tipográfia | A kiválasztott fül címének megjelenése. | Nincs |

### Tartalom

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Kitöltés | A tartalom belső távolsága. | 20px mindenhol |
| Szövegigazítás | A tartalom szövegének igazítása. | Nincs |
| Szövegszín | A tartalom szövegének színe. | Nincs |
| Háttérszín | A tartalom háttere. | Nincs |
| Szegély | A tartalom szegélye. | 1px, `#dedede`, mindenhol |

## Fülek (Beágyazható elemek)

![A Fülek (Beágyazható elemek) beállításai a szerkesztőben](./kepek/elemek-4-tabs-nested.webp)

*A Fülek (Beágyazható elemek) beállításai a szerkesztőben* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az **Irány** gombjai, a **Fül megnyitása...**, a **Megnyitandó fül index** mező, valamint a **Cím** és a **Tartalom** csoport látszik. A füleket és a tartalmakat a **Szerkezet** nézetben húzással hozod létre és rendezed, és mindegyik tartalom tetszőleges elemeket hordozhat.

A horgonyhivatkozással megnyitható fülhez a fülmenü „Div” elemének **ID** mezőjét töltsd ki (szóköz és kettőskereszt nélkül).

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Irány** | A fülek elrendezési iránya (`flex-direction`). | Nincs |
| **Fül megnyitása...** | Kattintásra (click) vagy ráhúzáskor (hover) nyíljon. | Click |
| **Megnyitandó fül index** | A betöltéskor kinyitott fül indexe, 0-tól. | 0 |

### Cím

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Szélesség | A címek szélessége. | auto |
| Térköz | A címek külső távolsága. | Nincs |
| Kitöltés | A címek belső távolsága. | 20px mindenhol |
| Háttér, Szegély, Tipográfia | A címek megjelenése. | Nincs |
| Aktív háttérszín | A kiválasztott cím háttere. | `#dddedf` |
| Aktív szegély, Aktív tipográfia | A kiválasztott cím szegélye és betűstílusa. | Nincs |

### Tartalom

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Térköz | A tartalom külső távolsága. | Nincs |
| Kitöltés | A tartalom belső távolsága. | 20px mindenhol |
| Szövegszín | A tartalom szövegének színe. | Nincs |
| Háttérszín | A tartalom háttere. | Nincs |
| Szegély | A tartalom szegélye. | 1px, mindenhol |