# Kapcsoló elem

> A Kapcsoló elem: gomb egy másik elem (például Offcanvas) megnyitásához és bezárásához, hamburger-animációk, ikon és hozzáférhetőség.

A **Kapcsoló** elem egy gombot rajzol, amellyel más elemet nyitsz meg vagy zársz be. Leggyakrabban egy [Offcanvas elem](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-offcanvas/) menüjét nyitja. Használhatsz saját ikont, vagy a beépített, animált „hamburger" sávokat (több animációs előbeállítással).

![A Kapcsoló elem beállításai a szerkesztő bal oldali paneljén](./kepek/elemek-5-toggle.webp)

*A Kapcsoló elem beállításai a szerkesztő bal oldali paneljén* (https://minta-bolt.hu/elemek/?bricks=run)

A képen az **Ikon**, az **Animáció** és az **aria-label** mező, alatta a **Kapcsoló** csoport a **CSS-szelektor**, az **Attribútum** és az **Érték** mezővel, majd a **Sáv** csoport látszik. A panel tájékoztatója szerint az elem azonosítóját (vagy egy érvényes CSS-szelektort) kell bemásolnod a **CSS-szelektor** mezőbe.

## Beállítások

### Ikon (nem kötelező)

Ha megadsz ikont, a sávanimáció eltűnik, és az ikon jelenik meg helyette.

| Beállítás | Mit csinál |
| --- | --- |
| **Ikon** | A gombon megjelenő ikon. |
| **Szín** | Az ikon színe. |
| **Méret** | Az ikon mérete (mértékegységgel). |

### Kapcsoló

| Beállítás | Mit csinál | Alapérték (helykitöltő) |
| --- | --- | --- |
| **CSS-szelektor** | A kapcsolandó cél elem, például egy Offcanvas esetén `.brxe-offcanvas`. | `.brxe-offcanvas` |
| **Attribútum** | A módosítandó HTML-attribútum. Alapból a `class` változik. | `class` |
| **Érték** | Az érték, amelyet a kapcsolás alkalmaz, például a nyitott állapot osztálya. | `brx-open` |

### Sáv (ha nincs egyéni ikon)

| Beállítás | Mit csinál |
| --- | --- |
| **Animáció** | A hamburger-sávok animációs előbeállítása: `close (x)`, `arrow`, `arrow-r`, `arrowalt`, `arrowalt-r`, `arrowturn`, `arrowturn-r`, `minus`, `spin`, `spring`, `squeeze`, `vortex`, vagy **Nincs**. |
| **Méretezés** | A sávok méretezése (a `--brxe-toggle-scale` változón át). |
| **Magasság**, **Sugár** | A sávok vastagsága és lekerekítése (mértékegységgel). |
| **Szín** | A sávok színe. |

### Akadálymentesség

Az **aria-label** a gomb képernyőolvasónak szánt felirata. Alapértéke „Megnyitás" (a helykitöltő szöveg szerint). Ha a Kapcsoló bizonyos szerkezetekben (például a Navigációban) beágyazott bezáró vezérlőként szerepel, az alapértelmezett felirat a „Bezárás".

## Offcanvas megnyitása a Kapcsolóval

1. Add hozzá az Offcanvas elemet az oldalhoz.
2. Add hozzá a **Kapcsoló** elemet oda, ahol a gombnak látszania kell.
3. A **CSS-szelektor** mezőbe írd be az Offcanvas osztályát vagy azonosítóját (például `.brxe-offcanvas`).
4. Hagyd az **Attribútum** és az **Érték** mezőt az alapértéken (`class`, `brx-open`).
5. Válassz **Animáció**t, vagy adj meg saját **Ikon**t.