Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Snackbar

Snackbar se zobrazí jako malé vyskakovací okno v dolní části okna a může se automaticky zavřít po vypršení času nebo když uživatel klikne nebo se dotkne jiné části obrazovky.

Na obrazovce se může najednou zobrazit pouze jeden Snackbar. Pokud se otevře další Snackbar, když se aktuální ještě nezavřel, bude další Snackbar přidán do fronty a otevře se po zavření aktuálního.

Způsob volání

Můžete zavolat metodu mdui.snackbar(params).

Související čtení

Designové zásady Material Design: Komponenty - Snackbar a Toast

Způsob použití

Snackbar se vyvolává přímo z JavaScriptu a nevyžaduje psaní HTML struktury.

Existují dva způsoby, jak zavolat Snackbar:

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

Návratová hodnota obou metod je instance Snackbaru.

Parametry podporované Snackbarem:

Název parametru	Typ	Výchozí hodnota	Popis
`message`	`string`		Text Snackbaru. Pokud se volá přes `mdui.snackbar(params)`, tento parametr nemůže být prázdný.
`timeout`	`int`	`4000`	Doba zpoždění před automatickým skrytím Snackbaru (v ms). Nastavte na 0, aby se nezavíral automaticky.
`position`	`string`	`bottom`	Pozice Snackbaru. `bottom`: Dole `top`: Nahoře `left-top`: Vlevo nahoře `left-bottom`: Vlevo dole `right-top`: Vpravo nahoře `right-bottom`: Vpravo dole
`buttonText`	`string`		Text tlačítka.
`buttonColor`	`string`	`#90CAF9`	Barva textu tlačítka. Může být název barvy nebo hodnota barvy, např. `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)` atd.
`closeOnButtonClick`	`boolean`	`true`	Zda se má Snackbar zavřít po kliknutí na tlačítko.
`closeOnOutsideClick`	`boolean`	`true`	Zda se má Snackbar zavřít po kliknutí nebo dotknutí se oblasti mimo Snackbar.
`onClick`	`function`		Funkce zpětného volání při kliknutí na Snackbar.
`onButtonClick`	`function`		Funkce zpětného volání při kliknutí na tlačítko Snackbaru.
`onOpen`	`function`		Funkce zpětného volání při zahájení otevírání Snackbaru.
`onOpened`	`function`		Funkce zpětného volání po dokončení otevření Snackbaru.
`onClose`	`function`		Funkce zpětného volání při zahájení zavírání Snackbaru.
`onClosed`	`function`		Funkce zpětného volání po dokončení zavření Snackbaru.

Metody instance Snackbaru:

Název metody	Popis
`close`	Zavře Snackbar. Po zavření bude instance Snackbaru zničena.

Příklad

Běžný Snackbar

Příklad

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

Snackbar se zpětným voláním

Příklad

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Bylo kliknuto na Snackbar');
  },
  onButtonClick: function(){
    mdui.alert('Bylo kliknuto na tlačítko');
  },
  onClose: function(){
    mdui.alert('Snackbar byl zavřen.');
  }
});

Snackbar v různých pozicích

Příklad

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

Tabulka