Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Snackbar

Snackbar wyświetla niewielkie wyskakujące okienko u dołu ekranu, które może zniknąć automatycznie po upływie czasu lub po dotknięciu lub kliknięciu w innym miejscu ekranu przez użytkownika.

Na ekranie może być wyświetlany jednocześnie tylko jeden Snackbar. Jeśli kolejny Snackbar zostanie otwarty, zanim bieżący zostanie zamknięty, zostanie on dodany do kolejki i otwarty po zamknięciu bieżącego.

Sposób użycia

Wystarczy wywołać metodę mdui.snackbar(params).

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Snackbar i Toast

Sposób użycia

Snackbar jest wywoływany bezpośrednio przez JavaScript, nie ma potrzeby pisania układu HTML.

Istnieją dwa sposoby wywołania Snackbar:

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

W obu przypadkach zwracana jest Instancja Snackbara.

Parametry obsługiwane przez Snackbar:

Nazwa parametru	Typ	Wartość domyślna	Opis
`message`	`string`		Tekst Snackbara. Przy wywołaniu przez `mdui.snackbar(params)` parametr ten nie może być pusty.
`timeout`	`int`	`4000`	Opóźnienie automatycznego ukrywania Snackbara w milisekundach. Ustawienie 0 spowoduje, że nie zamknie się automatycznie.
`position`	`string`	`bottom`	Pozycja Snackbara. `bottom`: dół `top`: góra `left-top`: lewy górny róg `left-bottom`: lewy dolny róg `right-top`: prawy górny róg `right-bottom`: prawy dolny róg
`buttonText`	`string`		Tekst przycisku.
`buttonColor`	`string`	`#90CAF9`	Kolor tekstu przycisku, może to być nazwa koloru lub wartość koloru, np. `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)` itp.
`closeOnButtonClick`	`boolean`	`true`	Czy zamknąć Snackbar po kliknięciu przycisku.
`closeOnOutsideClick`	`boolean`	`true`	Czy zamknąć Snackbar po kliknięciu lub dotknięciu obszaru poza nim.
`onClick`	`function`		Funkcja zwrotna wywoływana po kliknięciu na Snackbar.
`onButtonClick`	`function`		Funkcja zwrotna wywoływana po kliknięciu przycisku na Snackbar.
`onOpen`	`function`		Funkcja zwrotna wywoływana przed otwarciem Snackbara.
`onOpened`	`function`		Funkcja zwrotna wywoływana po otwarciu Snackbara.
`onClose`	`function`		Funkcja zwrotna wywoływana przed zamknięciem Snackbara.
`onClosed`	`function`		Funkcja zwrotna wywoływana po zamknięciu Snackbara.

Metody Instancji Snackbara:

Nazwa metody	Opis
`close`	Zamyka Snackbar; po zamknięciu Snackbar zostanie zniszczony.

Przykład

Zwykły Snackbar

Przykład

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

Snackbar z funkcjami zwrotnymi

Przykład

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Kliknięto Snackbar');
  },
  onButtonClick: function(){
    mdui.alert('Kliknięto przycisk');
  },
  onClose: function(){
    mdui.alert('Zamknięto');
  }
});

Snackbar w różnych pozycjach

Przykład

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

Tabela