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

Snackbar

Az mdui-ban bizonyos összetevőket inicializálni kell a DOM betöltése után. Emiatt a dinamikusan létrehozott összetevők nem inicializálódnak automatikusan. Erre a célra az mdui az <code>mdui.mutation()</code> metódust biztosítja.

Ennek a metódusnak a meghívása inicializálja az oldalon az összes még nem inicializált összetevőt.

Használat

Dinamikusan hozzáadott Select összetevő, amely egyedi attribútumokon keresztüli hívás miatt nem inicializálódik automatikusan

Kapcsolódó olvasmányok

Metódus hívása az oldalon lévő összes még nem inicializált összetevő inicializálásához

Ha az <code>mdui.mutation()</code> metódust két paraméterrel hívja meg, azzal saját készítésű összetevők inicializálására is használható. Az első paraméter a CSS-szelektor, a második pedig az inicializáló függvény.

Amikor legközelebb meghívja az <code>mdui.mutation()</code> metódust, ha a CSS-szelektornak megfelelő összetevő még nincs inicializálva, az inicializáló függvény automatikusan lefut.

Ha egy adott elemen belüli összetevőket szeretne inicializálni, használhatja a <code>$(selector).mutation()</code> metódust, amely inicializálja a szelektorban meghatározott elemet és annak összes nem inicializált gyermekelemét.

mdui.snackbar(message, params)
mdui.snackbar(params)

Rögzítés az oldal tetejéhez

Felső alkalmazássáv automatikus elrejtése

Paraméter neve	Típus	Alapértelmezett	Leírás
`message`	`string`		Eszköztár automatikus elrejtése a felső alkalmazássávban
`timeout`	`int`	`4000`	Az alkalmazássáv árnyékának eltávolításához hozzá kell adni a <code>.mdui-shadow-0</code> osztályt.
`position`	`string`	`bottom`	A <code>.mdui-appbar-fixed</code> osztály hozzáadása a <code><div class="mdui-appbar"></div></code> elemhez rögzíti az alkalmazássávot az oldal tetején, így az nem gördül az oldallal együtt. Annak érdekében, hogy az alkalmazássáv ne takarja el az oldal tartalmát, a `body` elemhez egy osztályt kell adni, amellyel a `body` elemhez `padding-top` adható hozzá: `.mdui-appbar-with-toolbar`: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv eszköztárat tartalmaz. `.mdui-appbar-with-tab`: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv füleket tartalmaz. `.mdui-appbar-with-tab-larger`: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv olyan füleket tartalmaz, amelyek ikont és szöveget is megjelenítenek. Ha az alkalmazássáv az eszköztáron és a füleken kívül más elemeket is tartalmaz, saját magának kell beállítania a megfelelő `padding-top` értéket a `body` elemen. 1. példa
`buttonText`	`string`		2. példa
`buttonColor`	`string`	`#90CAF9`	3. példa
`closeOnButtonClick`	`boolean`	`true`	A <code>.mdui-appbar-scroll-hide</code> osztály hozzáadása a <code><div class="mdui-appbar"></div></code> elemhez elrejti az alkalmazássávot lefelé görgetéskor, és megjeleníti felfelé görgetéskor.
`closeOnOutsideClick`	`boolean`	`true`	Ha az elemek dinamikusan jönnek létre, a <a href="/hu/docs/1/global#mutation"><code>mdui.mutation()</code></a> függvényt kell meghívni az inicializáláshoz.
`onClick`	`function`		A <code>.mdui-appbar-scroll-toolbar-hide</code> osztály hozzáadása a <code><div class="mdui-appbar"></div></code> elemhez elrejti az eszköztárat lefelé görgetéskor, és megjeleníti felfelé görgetéskor, ha az alkalmazássáv eszköztárat és füleket is tartalmaz.
`onButtonClick`	`function`		Ha az elemek dinamikusan jönnek létre, a <a href="/hu/docs/1/global#mutation"><code>mdui.mutation()</code></a> függvényt kell meghívni az inicializáláshoz.
`onOpen`	`function`		Felső alkalmazássáv definiálása.
`onOpened`	`function`		A felső alkalmazássáv rögzítése az oldal tetejéhez.
`onClose`	`function`		Ezt az osztályt a <code>body</code> elemhez kell adni, ha az alkalmazássáv eszköztárat tartalmaz.
`onClosed`	`function`		Ezt az osztályt a <code>body</code> elemhez kell adni, ha az alkalmazássáv füleket tartalmaz.

Ezt az osztályt a <code>body</code> elemhez kell adni, ha az alkalmazássáv ikont és szöveget is tartalmazó füleket tartalmaz.

Metódus neve	Leírás
`close`	Alkalmazássáv elrejtése lefelé görgetéskor, megjelenítése felfelé görgetéskor.

Az <code>mdui.mutation(selector, apiInit)</code> hívásakor a CSS-szelektor és az inicializáló függvény összekapcsolódik, és lefut a <code>$(selector).each(apiInit)</code> kód az inicializáláshoz.

Eszköztár elrejtése lefelé görgetéskor, megjelenítése felfelé görgetéskor, ha az alkalmazássáv eszköztárat és füleket is tartalmaz.

Példa

mdui.snackbar({
  message: 'Message sent'
});

Kártya tartalmának definiálása.

Példa

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Kártya műveletsávjának definiálása.');
  },
  onButtonClick: function(){
    mdui.alert('A műveletsáv függőleges elrendezése.');
  },
  onClose: function(){
    mdui.alert('Sor meghatározása');
  }
});

Oszlop meghatározása

Példa

mdui.snackbar({
  message: 'bottom',
  position: 'bottom',
});

mdui.snackbar({
  message: 'top',
  position: 'top',
});

mdui.snackbar({
  message: 'left-top',
  position: 'left-top',
});

mdui.snackbar({
  message: 'left-bottom',
  position: 'left-bottom',
});

mdui.snackbar({
  message: 'right-top',
  position: 'right-top',
});

mdui.snackbar({
  message: 'right-bottom',
  position: 'right-bottom',
});

Tooltip

Táblázat