Bootstrap Toast Bildirim Mesajları: Başlatma, Konum ve Erişilebilirlik

Toast nedir, ne zaman kullanılır

Toast, mobil ve masaüstü işletim sistemlerindeki anlık bildirimleri taklit eden hafif bir mesaj kutusudur: “Kayıt başarıyla güncellendi”, “Dosya yüklendi” ya da “Yeni mesajınız var” gibi kısa, akışı kesmeyen bilgiler için uygundur. Flexbox ile kurulduğundan içindeki öğeleri hizalamak ve kutuyu konumlandırmak kolaydır.

Belge önemli bir ayrım yapar: bilgi süreç için kritikse, örneğin bir formdaki hata listesi gibi, toast yerine alert bileşenini kullanmanız gerekir. Toast kısa süre sonra kaybolur ve odak almaz; kullanıcının mutlaka görmesi ve üzerinde işlem yapması gereken bir mesaj için uygun değildir. Kullanıcıdan karar bekleyen durumlarda ise modal pencere daha doğru bir seçimdir.

Temel toast iskeleti

Belge genişletilebilir ve öngörülebilir bir görünüm için bir başlık (.toast-header) ve bir gövde (.toast-body) kullanmanızı önerir. En az gereken yapı içeriği saran tek bir .toast öğesidir, ancak bir kapatma butonu eklemeniz güçlü biçimde tavsiye edilir. Başlık display: flex kullandığından, içindeki küçük görseli, başlığı ve zamanı margin ve flex yardımcı sınıflarıyla kolayca hizalarsınız:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="logo-20.png" class="rounded me-2" alt="">
    <strong class="me-auto">Sipariş takibi</strong>
    <small>2 dakika önce</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Kapat"></button>
  </div>
  <div class="toast-body">
    Siparişiniz kargoya verildi.
  </div>
</div>

Başlıktaki .me-auto, başlık metnini sola yaslayıp zamanı ve kapatma butonunu sağa iter; bu, flex düzeninde otomatik kenar boşluğunun bilinen bir kullanımıdır (ayrıntı için Bootstrap flex yazısına bakın). data-bs-dismiss="toast" özniteliğini taşıyan buton, kaynak koddaki tıklama işleyicisi sayesinde toastı gizler. Derlenmiş CSS dosyasına göre .toast 350px genişliğinde, en fazla yüzde 100 genişlikte ve hafif saydam beyaz bir arka planla tanımlıdır; belge bunu alttaki içerikle uyum sağlayan yarı saydam görünüm olarak tanımlar.

Burada dikkat edilmesi gereken bir CSS ayrıntısı vardır: derlenmiş dosyada .toast:not(.showing):not(.show) kuralı opaklığı sıfıra indirir. Yani yukarıdaki kodu sayfaya koyup JavaScript ile göstermezseniz kutu yer kaplar ama görünmez. Kutunun hiç yer kaplamaması için belgedeki canlı örnek ayrıca .hide sınıfını kullanır; .toast.hide kuralı display: none verir.

Gösterme ve gizleme sırasında sınıfların nasıl değiştiğini bilmek, kendi CSS kurallarınızı yazarken işe yarar. Bootstrap v5.0.2 kaynak kodu: toast.js dosyasına göre show() çağrıldığında önce show.bs.toast olayı tetiklenir; olay iptal edilmediyse animation açıksa öğeye .fade eklenir, .hide kaldırılır ve geçiş süresince .showing sınıfı uygulanır. Geçiş bitince .showing yerini .show sınıfına bırakır, shown.bs.toast tetiklenir ve autohide açıksa gizleme sayacı başlar. hide() ise önce .show sınıfını kaldırır, geçiş bittiğinde .hide ekler ve hidden.bs.toast olayını yayar. Toast zaten gizliyse hide() hiçbir şey yapmaz. animation: false verildiğinde .fade eklenmez ve sınıf değişiklikleri geçiş beklenmeden uygulanır.

Butonla gösterilen canlı toast

Gerçek projelerde toast genellikle bir işlemin ardından gösterilir. Belgedeki canlı örnek, toastı .hide ile gizli başlatır ve konumlandırma yardımcılarıyla sağ alt köşeye yerleştirir: dış kapsayıcı .position-fixed, .bottom-0, .end-0 ve kenardan uzaklaştıran .p-3 sınıflarını alır:

<button type="button" class="btn btn-primary" id="kaydetButonu">Kaydet</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="kayitToast" class="toast hide" role="status" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Profil</strong>
      <small>şimdi</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Kapat"></button>
    </div>
    <div class="toast-body">
      Değişiklikleriniz kaydedildi.
    </div>
  </div>
</div>

var kaydetButonu = document.getElementById('kaydetButonu')
var kayitToast = document.getElementById('kayitToast')

kaydetButonu.addEventListener('click', function () {
  var toast = new bootstrap.Toast(kayitToast)
  toast.show()
})

Bu JavaScript, Bootstrap belge sitesinin canlı örneği çalıştırmak için kullandığı kodla aynı yapıdadır. Her tıklamada yeni bir örnek oluşturmak yerine bir kez oluşturup saklamak ya da bootstrap.Toast.getOrCreateInstance(kayitToast) kullanmak daha temiz bir yoldur; bu statik yöntem öğeye bağlı örnek varsa onu, yoksa yenisini verir. Konum sınıflarının (.position-fixed, .bottom-0, .end-0) ayrıntısı için Bootstrap position yazısına bakın.

Sayfadaki bütün toastları tek seferde başlatmak isterseniz belgedeki kalıp şudur; option yerine kendi seçenek nesnenizi verirsiniz:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Birden fazla toastı yığmak ve konumlandırmak

Birden çok bildirim üst üste gelecekse toastları .toast-container içine koyarsınız. Derlenmiş CSS bu kapsayıcıdaki son öğe dışındaki her çocuğa 0.75rem alt boşluk verir; böylece bildirimler aralarında boşlukla dikey olarak dizilir. Kapsayıcı pointer-events: none aldığından boş alanı alttaki sayfanın tıklanmasını engellemez, toastların kendisi ise pointer-events: auto ile tıklanabilir kalır.

Belge, çok bildirim üreten sistemler için toastları bir sarmalayıcıya koymayı önerir. Aşağıdaki örnekte dış öğe aria-live="polite" bölgesidir, içteki .toast-container ise .position-absolute .top-0 .end-0 .p-3 ile sağ üst köşeye yerleşir. Sarmalayıcının .position-relative olması, mutlak konumun bu kutuya göre hesaplanmasını sağlar:

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast-container position-absolute top-0 end-0 p-3">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Yedekleme</strong>
        <small class="text-muted">şimdi</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Kapat"></button>
      </div>
      <div class="toast-body">Gece yedeği tamamlandı.</div>
    </div>
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">Güncelleme</strong>
        <small class="text-muted">2 saniye önce</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Kapat"></button>
      </div>
      <div class="toast-body">Yeni sürüm yüklenmeye hazır.</div>
    </div>
  </div>
</div>

Belgede yer alan konum seçim örneği, kapsayıcıya verilebilecek sınıf birleşimlerini gösterir. Bunlar Bootstrap 5.0: Position sayfasındaki konum yardımcılarıdır:

Belgeye göre bildirimler için en sık sağ üst ve üst orta kullanılır. Aynı anda yalnızca tek toast gösterecekseniz konum sınıflarını doğrudan .toast öğesine verebilirsiniz. Toastları yatay ya da dikey ortalamak için flex yardımcıları da işe yarar: sarmalayıcıya .d-flex .justify-content-center .align-items-center .w-100 verildiğinde toast kutunun ortasına yerleşir.

Özel içerik ve renk şemaları

Toastı ihtiyacınıza göre sadeleştirebilirsiniz. Başlığı tamamen kaldırıp gövde ile kapatma butonunu bir .d-flex satırına koymak, tek satırlık kısa bildirimler için iyi çalışır. Kapatma butonuna verilen .me-2 .m-auto sınıfları butonu dikeyde ortalar ve sağdan biraz boşluk bırakır. Renkli bir bildirim için .toast öğesine arka plan ve metin rengi yardımcılarını eklersiniz; belgedeki örnek .bg-primary ve .text-white kullanır, varsayılan kenarlığı .border-0 ile kaldırır ve koyu zeminde görünsün diye kapatma butonuna .btn-close-white ekler:

<div class="toast align-items-center text-white bg-success border-0" role="status" aria-live="polite" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Ödemeniz alındı.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Kapat"></button>
  </div>
</div>

Toast gövdesine ek butonlar da koyabilirsiniz; belge, gövdenin altına .mt-2 .pt-2 .border-top sınıflı bir bölüm açıp küçük butonlar (.btn-sm) yerleştirmeyi örnekler. Ancak erişilebilirlik bölümünde göreceğiniz gibi, kendiliğinden kaybolan toastlara tıklanabilir öğe koymak sorun yaratır. Renk yardımcılarının listesi için Bootstrap renk sınıfları yazısına bakın.

Erişilebilirlik: aria-live, role ve süre

Toastlar ziyaretçinin işini kısa süreliğine kesen bildirimler olduğundan, ekran okuyucu kullananların da haberdar olması için toastları bir aria-live bölgesine sarmanız gerekir. Canlı bölgede yapılan değişiklikler, kullanıcının odağını taşımadan ekran okuyucu tarafından otomatik olarak seslendirilir. aria-atomic="true" eklemek ise toastın yalnızca değişen parçasının değil, her seferinde bütün olarak okunmasını sağlar.

Belgenin özellikle uyardığı bir ayrıntı vardır: canlı bölge, toast üretilmeden ya da güncellenmeden önce sayfada bulunmalıdır. Hem bölgeyi hem toastı aynı anda JavaScript ile oluşturup sayfaya eklerseniz yardımcı teknolojiler genellikle bunu duyurmaz. Rol ve öncelik içeriğe göre seçilir:

Gösterdiğiniz içerik uzadıkça delay süresini de artırmalısınız ki kullanıcının okumaya vakti olsun. autohide: false kullanıyorsanız kapatma butonu eklemek zorunludur; aksi hâlde kullanıcı bildirimi kapatamaz. Kendiliğinden kaybolan toastlara buton ya da bağlantı eklemekten kaçının: toastlar gösterildiklerinde odak almadığından, uzun bir süre verseniz bile klavye ve ekran okuyucu kullanıcıları zamanında oraya ulaşamayabilir. Ek kontrol şartsa toastı autohide: false ile kalıcı yapın:

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <strong class="me-auto">Oturum</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Kapat"></button>
  </div>
  <div class="toast-body">
    Oturumunuz 5 dakika içinde sona erecek.
  </div>
</div>

Kaynak kodda belgede yazmayan küçük ama faydalı bir davranış daha vardır: Bootstrap v5.0.2 kaynak kodu: toast.js dosyası toast üzerinde fare gezinirken (mouseover) ya da toastın içindeki bir öğe odaktayken (focusin) otomatik gizleme sayacını başlatmaz; fare ayrıldığında veya odak çıktığında sayaç yeniden kurulur. Yine de bu davranışa güvenip kritik bilgiyi toasta bırakmayın. ARIA kavramlarının genel anlatımı ARIA yazısında, Bootstrap tarafındaki erişilebilirlik ayarları Bootstrap erişilebilirlik yazısında yer alır.

JavaScript seçenekleri, yöntemleri ve olayları

Seçenekler JavaScript ile ya da veri öznitelikleriyle verilir; veri özniteliğinde seçenek adının başına data-bs- eklenir, data-bs-delay="10000" gibi. Kaynak koddaki Default nesnesiyle belge aynı üç seçeneği listeler:

Yöntemler eşzamansızdır ve geçiş başlar başlamaz çağırana döner. show() toastı gösterir; belge bu yöntemi elle çağırmazsanız toastın hiç görünmeyeceğini belirtir. hide() toastı gizler; autohide kapalıysa gizleme işini bu yöntemle siz yaparsınız. dispose() toastı gizler ve örneği yok eder, öğe sayfada kalır ama artık gösterilmez. getInstance() ve getOrCreateInstance() statik yöntemleri öğeye bağlı örneği almak için kullanılır.

var myToastEl = document.getElementById('myToast')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl, { delay: 8000 })

myToast.show()

myToastEl.addEventListener('hidden.bs.toast', function () {
  // toast tamamen gizlendi; ornegin sayfadan kaldirabilirsiniz
})

Olaylar toast öğesinin kendisinde tetiklenir:

Mastar biçimli show ve hide olayları preventDefault() ile durdurulabilir; bu ortak kural ve diğer bileşenlerle paylaşılan programatik API Bootstrap JavaScript API yazısında anlatılır. Toastın görünümünü değiştirmek isterseniz Sass tarafında $toast-max-width (350px), $toast-padding-x, $toast-font-size, $toast-background-color ve $toast-spacing gibi değişkenler bulunur.

Sık yapılan hatalar

• Toastı başlatmamak: En yaygın sorun budur. Toast HTML ile kendiliğinden görünmez; new bootstrap.Toast(oge).show() çağırmanız gerekir.
• Canlı bölgeyi toastla birlikte oluşturmak: aria-live sarmalayıcısı sayfada önceden durmalıdır, yoksa ekran okuyucu duyurmaz.
• autohide kapalıyken kapatma butonu eklememek: Kullanıcı bildirimi kapatamaz.
• Kritik hata mesajını toasta koymak: Kaybolan bir kutu, form hataları için uygun değildir; alert kullanın.
• Konum kapsayıcısını unutmak: Toast normal akışta durur ve sayfanın içinde bir yerde görünür. Köşeye yerleştirmek için sabit ya da mutlak konumlu bir kapsayıcı kullanın.
• JavaScript dosyasını yüklememek: Toastın gösterilmesi ve kapatılması Bootstrap JavaScript gerektirir; kurulum için CDN kurulum yazısına bakın.

Bootstrap’in genel olarak çalışmadığı durumlar için sık hatalar yazısına bakabilirsiniz.

Sık Sorulan Sorular

Bootstrap toast neden görünmüyor?

Büyük olasılıkla toastı JavaScript ile başlatıp show() çağırmadınız. Toast opt-in bir bileşendir ve veri öznitelikleriyle kendiliğinden açılmaz.

Toastın ekranda kalma süresini nasıl uzatırım?

delay seçeneğini milisaniye olarak verin, örneğin data-bs-delay="10000". Hiç kaybolmamasını istiyorsanız data-bs-autohide="false" kullanın ve bir kapatma butonu ekleyin.

Toastı sağ üst köşeye nasıl koyarım?

Toastları .toast-container içine koyup kapsayıcıya .position-fixed .top-0 .end-0 .p-3 sınıflarını verin. Belgedeki örneklerde mutlak konum için .position-absolute de kullanılır.

Aynı anda birden fazla toast gösterebilir miyim?

Evet. Hepsini aynı .toast-container içine koyun; aralarındaki dikey boşluk CSS tarafından otomatik verilir. Her toast için ayrı bir örnek oluşturup show() çağırırsınız.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap alert · Bootstrap modal · Position sınıfları · JavaScript API · JavaScript öğrenme rehberi