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

A Snackbar egy kis előugró ablakot jelenít meg az ablak alján, amely automatikusan eltűnik időtúllépés után, vagy ha a felhasználó a képernyő más pontjára kattint vagy koppint.

Egyszerre csak egy Snackbar jelenhet meg a képernyőn. Ha egy újabb Snackbar-t nyitnak meg, mielőtt az előző bezárulna, az a sorba kerül, és csak az aktuális Snackbar bezárása után jelenik meg.

Használat

Egyszerűen hívja meg az mdui.snackbar(params) metódust.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Snackbar és Toast

Használat

A Snackbart közvetlenül JavaScriptből kell meghívni, nem igényel HTML elrendezést.

Kétféleképpen hívható meg a Snackbar:

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

Mindkét módszer egy Snackbar példányt ad vissza.

A Snackbar által támogatott paraméterek:

Paraméter neve	Típus	Alapértelmezett	Leírás
`message`	`string`		A Snackbar szövege. Az `mdui.snackbar(params)` hívásakor ez a paraméter nem lehet üres.
`timeout`	`int`	`4000`	A Snackbar automatikus elrejtésének késleltetése ezredmásodpercben. Állítsa 0-ra az automatikus bezárás letiltásához.
`position`	`string`	`bottom`	A Snackbar pozíciója. `bottom`: lent `top`: fent `left-top`: bal felső sarok `left-bottom`: bal alsó sarok `right-top`: jobb felső sarok `right-bottom`: jobb alsó sarok
`buttonText`	`string`		A gomb szövege.
`buttonColor`	`string`	`#90CAF9`	A gomb szövegének színe, lehet színnév vagy színkód, például `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)` stb.
`closeOnButtonClick`	`boolean`	`true`	Bezáródjon-e a Snackbar a gombra kattintáskor.
`closeOnOutsideClick`	`boolean`	`true`	Bezáródjon-e a Snackbar, ha a Snackbar területén kívülre kattintanak vagy koppintanak.
`onClick`	`function`		Visszahívási függvény a Snackbarra való kattintáskor.
`onButtonClick`	`function`		Visszahívási függvény a Snackbar gombjára való kattintáskor.
`onOpen`	`function`		Visszahívási függvény a Snackbar megnyílásának kezdetekor.
`onOpened`	`function`		Visszahívási függvény a Snackbar megnyílása után.
`onClose`	`function`		Visszahívási függvény a Snackbar bezárásának kezdetekor.
`onClosed`	`function`		Visszahívási függvény a Snackbar bezárása után.

A Snackbar példány metódusai:

Metódus neve	Leírás
`close`	Bezárja a Snackbart. Bezárás után a Snackbar megsemmisül.

Példák

Egyszerű Snackbar

Példa

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

Snackbar visszahívásokkal

Példa

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Snackbarra kattintva');
  },
  onButtonClick: function(){
    mdui.alert('Gombra kattintva');
  },
  onClose: function(){
    mdui.alert('Bezárva');
  }
});

Különböző pozíciójú Snackbarek

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