# Offcanvas elem

> Az Offcanvas elem beállításai: irány, hatás, bezárás, méret, átmenet és a megnyitást segítő kapcsolók.

Az **Offcanvas** elem egy beágyazható panel, amely a látható terület egyik széléről csúszik be (vagy tolja el az oldalt). Tipikus használata a mobilmenü.

![Az Offcanvas elem beállításai a szerkesztőben](./kepek/elemek-4-offcanvas.webp)

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

A képen az **Irány**, a **Hatás**, a **Bezárás ekkor**, a méret és az átmenet mezői látszanak. A panel tetején lévő tájékoztató szerint az Offcanvas megnyitásához egy **Kapcsoló** elemet kell az oldalra tenni, amely erre az Offcanvas elemre mutat.

## Felépítés

Az alapértelmezett szerkezetben két **Blokk** van az elem alatt:

- Az első a panel belseje (`.brx-offcanvas-inner`). Ide kerül a tartalom, például egy kezdő szöveg és egy bezáró kapcsoló.
- A második a háttérréteg (`.brx-offcanvas-backdrop`). Ha nem kell háttérréteg, töröld ezt a blokkot.

## Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Irány** | Honnan érkezik a panel: fent, jobbra, lent vagy balra. | Bal |
| **Hatás** | A megjelenés módja: dia (becsúszik) vagy eltolás (eltolja az oldalt). | Dia |
| **Bezárás ekkor** | Mikor záródik be: a háttérre kattintáskor, az Esc billentyűre, mindkettőre vagy soha. | Háttérréteg és Esc |
| **Szélesség**, **Magasság** | A belső panel mérete mértékegységgel. | Üres |
| **Átmenet: Időtartam** | A nyitás és zárás animációjának hossza. A `0s` kikapcsolja az animációt. | 0.2s |
| **Átmenet: Időzítési függvény** | Az animáció gyorsulási görbéje, például `cubic-bezier(0.25, 0, 0.25, 1)`. | `cubic-bezier(0.25, 0, 0.25, 1)` |
| **aria-label** | A párbeszédpanel címkéje a képernyőolvasóknak. | Offcanvas |
| **Nyitva tartás stílusozás közben** | A szerkesztőben nyitva tartja a panelt, hogy lásd a munkádat (a `brx-open` osztályt használja). | Ki |
| **Nincs görgetés (body)** | Nyitott panelnél az oldal nem görgethető. | Ki |
| **Görgetés a tetejére** | A panel megnyitásakor az oldal tetejére görget. | Ki |
| **Automatikus fókusz kikapcsolása** | Megnyitáskor nem ugrik a fókusz az első kezelhető elemre. | Ki |
| **Megnyitás oldalbetöltéskor** | A látogatói oldalon az oldal betöltésekor már nyitva van. A szerkesztőben nem érvényesül. | Ki |