snackbar.js kullanımı, Toast Message yapımı

Merhaba değerli okurlar. Bugün sizlere kullanışlı ve kullanımı kolay olan snackbar.js ile toast yapımını göstereceğim.

Yaptığımız projelerde gerçekleşen işlemlerin sonucunu kullanıcıya bildirmemiz son derece önemlidir, örneğin bir form gönderme işleminden sonra kullanıcıya formun gönderildiğini veya hata olduğunu bildirmemiz lazım. Peki bunu nasıl yapacağız? 

 #  snackbar.js Toast kullanımı

İlk adımımız snackbar toast'ı kullanabilmemiz için snackbar.min.js ve snackbar.min.css dosylarını indirmemiz ve projemize dahil etmemiz gerekir.

Snackbar Dosyalarını İndir

<link ref="stylesheet" type="text/css" href="snackbar.min.css" />
<script src="snackbar.min.js"></script>

Şimdiyse butonumuzu oluşturalım ve tıklanınca snackbar toast'ı çalıştıracak aksiyonu yazalım.

<button type="button" name="button" onclick="alertMessage()">Click Me</button>

<script type="text/javascript">
  function alertMessage() {
    Snackbar.show({
      text: 'Hoş geldin! Snackbar başarılı!',
      pos: 'bottom-right',
      showAction: true,
      actionText: "Tamam",
      actionTextColor: '#fff',
      duration: 4000,
      textColor: '#fff',
      backgroundColor: '#1a1a1a'
    });
  }
  </script>

İşte bu kadar, artık snackbar toastımız başarılı bir şekilde çalışıyor. Snackbar Orjinal dökümantasyonuna göz atın.

Umarım yazım sizlere yararlı olmuştur. Beni dinlediğiniz için teşekkür ederim.