Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Snackbar

Snackbar, ekranın altında küçük bir açılır kutu görüntüler; zaman aşımından sonra veya kullanıcı ekranın başka bir yerine tıkladığında veya dokunduğunda otomatik olarak kaybolabilir.

Ekranda aynı anda en fazla bir Snackbar görüntülenebilir. Bir Snackbar henüz kapanmamışken bir sonraki Snackbar açılırsa, sonraki Snackbar sıraya alınır ve geçerli Snackbar kapandıktan sonra açılır.

Kullanım

Sadece mdui.snackbar(params) metodunu çağırmanız yeterlidir.

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Snackbar ve Toast

Kullanım

Snackbar, HTML düzeni yazmaya gerek kalmadan doğrudan JavaScript tarafından çağrılır.

Snackbar'ı çağırmanın iki yolu vardır:

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

Her iki yöntemin dönüş değeri de Snackbar örneğidir.

Snackbar tarafından desteklenen parametreler:

Parametre Adı	Tür	Varsayılan	Açıklama
`message`	`string`		Snackbar metni. `mdui.snackbar(params)` aracılığıyla çağrıldığında bu parametre boş olamaz.
`timeout`	`int`	`4000`	Snackbar'ın otomatik olarak gizlenmesi için milisaniye cinsinden gecikme süresi. Otomatik olarak kapatmamak için 0 olarak ayarlayın.
`position`	`string`	`bottom`	Snackbar'ın konumu. `bottom`: Alt `top`: Üst `left-top`: Sol üst `left-bottom`: Sol alt `right-top`: Sağ üst `right-bottom`: Sağ alt
`buttonText`	`string`		Buton metni.
`buttonColor`	`string`	`#90CAF9`	Buton metin rengi; bir renk adı veya `red`, `#ffffff`, `rgba(255, 255, 255, 0.3)` gibi bir renk değeri olabilir.
`closeOnButtonClick`	`boolean`	`true`	Butona tıklandığında Snackbar'ın kapatılıp kapatılmayacağı.
`closeOnOutsideClick`	`boolean`	`true`	Snackbar dışındaki bir alana tıklandığında veya dokunulduğunda Snackbar'ın kapatılıp kapatılmayacağı.
`onClick`	`function`		Snackbar'a tıklandığında çalışacak geri çağırma işlevi (callback).
`onButtonClick`	`function`		Snackbar üzerindeki butona tıklandığında çalışacak geri çağırma işlevi.
`onOpen`	`function`		Snackbar açılmaya başladığında çalışacak geri çağırma işlevi.
`onOpened`	`function`		Snackbar açıldıktan sonra çalışacak geri çağırma işlevi.
`onClose`	`function`		Snackbar kapanmaya başladığında çalışacak geri çağırma işlevi.
`onClosed`	`function`		Snackbar kapandıktan sonra çalışacak geri çağırma işlevi.

Snackbar örneğinin sahip olduğu yöntemler:

Yöntem Adı	Açıklama
`close`	Snackbar'ı kapatır. Kapatıldıktan sonra Snackbar imha edilir.

Örnek

Sıradan Snackbar

Örnek

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

Geri çağırma ile Snackbar

Örnek

mdui.snackbar({
  message: 'Archived',
  buttonText: 'undo',
  onClick: function(){
    mdui.alert('Snackbar tıklandı');
  },
  onButtonClick: function(){
    mdui.alert('Buton tıklandı');
  },
  onClose: function(){
    mdui.alert('Kapatıldı');
  }
});

Farklı konumlarda Snackbar

Örnek

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

Tablo