Headroom
A Headroom bővítmény képes reagálni az oldal görgetésére, például az alkalmazássáv eltűnik lefelé görgetéskor, és megjelenik felfelé görgetéskor.
Az alkalmazássáv automatikus elrejtése és az alsó navigációs sáv automatikus elrejtése görgetéskor – amiről korábban szó volt – ezzel a bővítménnyel valósul meg.
Használat
- Hívás egyéni attribútumokon keresztül (ha a komponens dinamikusan jön létre, az inicializáláshoz a
mdui.mutation()hívása szükséges) - JavaScript segítségével történő hívás
Használat
Hívás egyéni attribútumokkal
Ezzel a módszerrel nincs szükség JavaScript kód írására. Csak adja hozzá az mdui-headroom="options" attribútumot az elemhez a bővítmény aktiválásához.
Ha a komponens dinamikusan jön létre, az inicializáláshoz a mdui.mutation() hívása szükséges.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>JavaScript segítségével történő hívás
Bővítmény példányosítása:
// A selector egy CSS választó vagy DOM elem
// Az options a bővítmény paraméterei, lásd az alábbi paraméterlistát
var inst = new mdui.Headroom(selector, options);Paraméter
| Paraméter neve | Típus | Alapértelmezett | Leírás |
|---|---|---|---|
tolerance | int | Object | 5 | A görgetési távolság, amely után az elem elrejtése elindul. Ha a paraméter értéke szám, az a felfelé és lefelé görgetésnél is ugyanazt a távolságot jelenti. Objektum is lehet, amely külön meghatározza a felfelé és lefelé görgetés távolságát. Például: |
offset | int | 0 | Az oldal tetejétől számított távolság, amely után elindul az elrejtés görgetés közben. |
initialClass | string | mdui-headroom | A bővítmény inicializálása után az elemhez adott CSS osztály. |
pinnedClass | string | mdui-headroom-pinned-top | A rögzített (pin) állapotban hozzáadott CSS osztály. |
unpinnedClass | string | mdui-headroom-unpinned-top | A rögzítés feloldása (unpin) után hozzáadott CSS osztály. |