A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Navigációs fiók

Az mdui navigációs fiókjai az oldal bal vagy jobb oldaláról csúszhatnak be, és egy oldalon több navigációs fiók is lehet.

A navigációs fiók viselkedése eltérő mobilon, táblagépen és asztali eszközökön. A böngésző ablakméretének módosításával megfigyelheti az oldal bal oldalán található navigációs fiók változásait:

Magasság
- Mobilon és táblagépen a navigációs fiók magassága mindig 100%.
- Asztali eszközökön a navigációs fiók alapértelmezés szerint nem fedi le az alkalmazássávot, így az oldal tetejétől egy alkalmazássávnyi távolságra helyezkedik el. A .mdui-drawer-full-height osztály hozzáadásával a navigációs fiók magassága 100% lesz, ilyenkor elfedheti az alkalmazássávot. Az alkalmazássávhoz hozzáadott .mdui-appbar-inset osztály megakadályozza, hogy a navigációs fiók elfedje azt.
Háttérszín és árnyék
- Mobilon és táblagépen a navigációs fiók alapértelmezés szerint fehér háttérrel és árnyékkal rendelkezik.
- Asztali eszközökön a navigációs fiók alapértelmezés szerint átlátszó háttérrel és árnyék nélkül jelenik meg. A .mdui-color-[color] osztály hozzáadásával beállítható a navigációs fiók háttérszíne és árnyéka.
Megjelenítési állapot
- Mobilon és táblagépen a navigációs fiók alapértelmezés szerint rejtett.
- Asztali eszközökön a navigációs fiók alapértelmezés szerint látható.
- A .mdui-drawer-open osztály hozzáadásával a navigációs fiók minden eszközön alapértelmezés szerint látható lesz; a .mdui-drawer-close osztály hozzáadásával pedig minden eszközön alapértelmezés szerint rejtett marad.
Takaróréteg
- Mobilon és táblagépet a navigációs fiók megnyitásakor mindig megjelenik egy takaróréteg.
- Asztali eszközökön a navigációs fiók megnyitásakor alapértelmezés szerint nem jelenik meg takaróréteg. Az overlay paraméter true értékre állításával megjeleníthető a takaróréteg a fiók megnyitásakor. Ha a takaróréteg megjelenítését választja, érdemes hozzáadni a .mdui-drawer-close osztályt, hogy a navigációs fiók alapértelmezés szerint rejtett legyen.

Használat

(Ha a komponens dinamikusan jön létre, az inicializáláshoz meg kell hívni az mdui.mutation() függvényt)
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Minták – Navigációs fiók

Használat

HTML szerkezet

<!-- Az mdui-drawer-body-left osztály padding-left értéket ad a body elemhez; ezt az osztályt akkor kell alkalmazni, ha a bal oldalon alapértelmezés szerint nyitott navigációs fiók található. -->
<!-- Az mdui-drawer-body-right osztály padding-right értéket ad a body elemhez; ezt az osztályt akkor kell alkalmazni, ha a jobb oldalon alapértelmezés szerint nyitott navigációs fiók található. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- Alapértelmezett navigációs fiók a bal oldalon -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Ha a navigációs fiókot a jobb oldalra szeretné helyezni, adja hozzá az mdui-drawer-right osztályt. -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Hívás egyéni attribútumokkal

Ezzel a módszerrel nincs szükség JavaScript-kód írására. Csak adjon hozzá egy mdui-drawer="options" attribútumot egy vezérlőelemhez (például egy gombhoz). Egyedi attribútumon keresztüli híváskor egy extra target paramétert is meg kell adni, amely meghatározza a vezérelt navigációs fiókot (ennek értéke a navigációs fiók CSS-szelektora).

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

A navigációs fiókon belüli elemekhez attribútumok adhatók az események kötéséhez, amelyek JavaScriptes hívás esetén is használhatók.

Attribútum	Leírás
`mdui-drawer-close`	Az elemre való kattintás kiváltja a `close.mdui.drawer` eseményt, és bezárja a navigációs fiókot.

JavaScript segítségével történő hívás

// A szelektor a navigációs fiók CSS-szelektora vagy DOM-eleme lehet.
// Az options a konfigurációs paraméterek listája, lásd alább.
var inst = new mdui.Drawer(selector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`overlay`	`boolean`	`false`	Megjelenjen-e takaróréteg a navigációs fiók megnyitásakor. Ez a paraméter csak közepes és nagyobb méretű képernyőkön érvényes; extra kis és kis képernyős eszközökön a takaróréteg mindig megjelenik.
`swipe`	`boolean`	`false`	Engedélyezve legyen-e a csúsztatási gesztus.

Metódus

Metódus neve	Leírás
`open`	A navigációs fiók megjelenítése.
`close`	A navigációs fiók elrejtése.
`toggle`	A navigációs fiók megjelenítési állapotának váltása.
`getState`	Visszatér a navigációs fiók aktuális állapotával. Négy állapot lehetséges (`opening`, `opened`, `closing`, `closed`).

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.drawer`	Az esemény akkor váltódik ki, amikor a navigációs fiók nyitási animációja elkezdődik.	`<div class="mdui-drawer"></div>`	`event._detail.inst`: Példány
`opened.mdui.drawer`	Az esemény akkor váltódik ki, amikor a navigációs fiók nyitási animációja befejeződik.
`close.mdui.drawer`	Az esemény akkor váltódik ki, amikor a navigációs fiók zárási animációja elkezdődik.
`closed.mdui.drawer`	Az esemény akkor váltódik ki, amikor a navigációs fiók zárási animációja befejeződik.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-drawer`	Navigációs fiók meghatározása.
`.mdui-drawer-right`	Navigációs fiók az oldal jobb oldalán.
`.mdui-drawer-full-height`	A navigációs fiók 100%-os magasságának beállítása.
`.mdui-drawer-open`	A navigációs fiók alapértelmezett megjelenítése.
`.mdui-drawer-close`	A navigációs fiók alapértelmezett elrejtése.
`.mdui-drawer-body-left`	`padding-left` hozzáadása a `body` elemhez.
`.mdui-drawer-body-right`	`padding-right` hozzáadása a `body` elemhez.

Alkalmazássáv

Alsó navigáció