Bootstrap, popüler bir frontend frameworküdür ve kullanıcı arayüzü oluşturmayı kolaylaştıran birçok bileşen sunar. Toast bileşeni, Bootstrap'in sağladığı etkileşimli bir bildirim öğesidir. Toast'lar, kısa ve öz mesajlar göstermek için kullanılır ve genellikle bir kullanıcının dikkatini çekmek veya bilgi vermek amacıyla kullanılır. Örneğin, bir form gönderiminden sonra başarı veya hata mesajı olarak kullanılabilirler.
Toast Bileşeninin Temel Özellikleri
- Otomatik kapanma: Toast'lar belirli bir süre sonra otomatik olarak kapanabilir.
- Animasyon: Açılma ve kapanma sırasında animasyonlu geçişler içerir.
- Yerleşim seçenekleri: Ekranın farklı köşelerine yerleştirilebilir (sağ üst, sol alt, vb.).
- Başlık ve içerik: Başlık, metin ve isteğe bağlı olarak bir düğme gibi ek bileşenler içerebilir.
- Düzgün kapanma: Kullanıcı manuel olarak toast'ı kapatabilir.
Örnek Kullanım
Bir basit toast örneği şu şekilde oluşturulabilir:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
<div class="toast-header">
<strong class="me-auto">Başlık</strong>
<small class="text-muted">Az önce</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Bu bir toast bildirimi örneğidir.
</div>
</div>
JavaScript ile Toast'ı Gösterme
Toast'ı tetiklemek için JavaScript kullanabilirsiniz:
var myToast = new bootstrap.Toast(document.querySelector('.toast'));
myToast.show();
Bu şekilde toast bileşeni kolayca eklenip özelleştirilebilir ve kullanıcıya bilgi vermek için etkili bir yöntem sunar.