Tostlar

Hafif ve kolayca özelleştirilebilir bir uyarı mesajı olan bir tost ile ziyaretçilerinize bildirimler gönderin.

Bu sayfada

Tostlar, mobil ve masaüstü işletim sistemleri tarafından popüler hale getirilen push bildirimlerini taklit etmek için tasarlanmış hafif bildirimlerdir. Flexbox ile üretildikleri için hizalanması ve konumlandırılması kolaydır.

genel bakış

Tost eklentisini kullanırken bilmeniz gerekenler:

Tostlar performans nedenleriyle isteğe bağlıdır, bu nedenle bunları kendiniz başlatmanız gerekir .
Belirtmezseniz tostlar otomatik olarak gizlenecektir autohide: false.

Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Örnekler

Temel

Genişletilebilir ve öngörülebilir tostları teşvik etmek için bir başlık ve gövde öneriyoruz. Tost başlıkları display: flex, kenar boşluğu ve esnek kutu yardımcı programlarımız sayesinde içeriğin kolayca hizalanmasını sağlar.

Tostlar ihtiyaç duyduğunuz kadar esnektir ve çok az işaretlemeye sahiptir. En azından, "kızartılmış" içeriğinizi içermesi için tek bir öğeye ihtiyacımız var ve bir kapatma düğmesini şiddetle tavsiye ediyoruz.

Selam Dünya! Bu bir tost mesajıdır.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

.hideÖnceden, komut dosyalarımız bir tostu tamamen gizlemek için sınıfı dinamik olarak ekledi ( display:nonesadece ile değil, ile opacity:0). Bu artık gerekli değil. Bununla birlikte, geriye dönük uyumluluk için, betiğimiz bir sonraki ana sürüme kadar sınıfı değiştirmeye (pratik bir ihtiyaç olmasa da) devam edecektir.

Canlı örnek

Varsayılan olarak gizlenmiş bir tostu (sağ alt köşede yardımcı programlarımızla birlikte konumlandırılmış) göstermek için aşağıdaki düğmeyi tıklayın.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Canlı tost demomuzu tetiklemek için aşağıdaki JavaScript'i kullanıyoruz:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

yarı saydam

Tostlar, altındakilerle uyum sağlamak için biraz yarı saydamdır.

Selam Dünya! Bu bir tost mesajıdır.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

İstifleme

Tostları dikey olarak biraz boşluk bırakacak bir tost kabına sararak istifleyebilirsiniz.

Görmek? Aynen böyle.

Dikkat, tostlar otomatik olarak üst üste gelecek

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Özel içerik

Alt bileşenleri kaldırarak, yardımcı programlarla ince ayar yaparak veya kendi işaretlemenizi ekleyerek tostlarınızı özelleştirin. Burada, varsayılanı kaldırarak, Bootstrap Icons'tan.toast-header özel bir gizleme simgesi ekleyerek ve düzeni ayarlamak için bazı esnek kutu yardımcı programlarını kullanarak daha basit bir tost oluşturduk.

Selam Dünya! Bu bir tost mesajıdır.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternatif olarak, tostlara ek kontroller ve bileşenler de ekleyebilirsiniz.

Selam Dünya! Bu bir tost mesajıdır.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Renk şemaları

Yukarıdaki örneği temel alarak, renk ve arka plan yardımcı programlarımızla farklı tost renk şemaları oluşturabilirsiniz. Burada ve öğelerini ekledik .bg-primaryve .text-whiteardından kapat düğmemize .toastekledik .btn-close-white. Keskin bir kenar için, varsayılan kenarlığı .border-0.

Selam Dünya! Bu bir tost mesajıdır.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Atama

Tostları ihtiyaç duyduğunuz şekilde özel CSS ile yerleştirin. Sağ üst kısım, orta üst kısım gibi genellikle bildirimler için kullanılır. Bir seferde yalnızca bir tost gösterecekseniz, konumlandırma stillerini doğrudan .toast.

Selam Dünya! Bu bir tost mesajıdır.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Daha fazla bildirim oluşturan sistemlerde, kolayca istiflenebilmeleri için bir sarma öğesi kullanmayı düşünün.

Görmek? Aynen böyle.

Dikkat, tostlar otomatik olarak üst üste gelecek

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Tostları yatay ve/veya dikey olarak hizalamak için flexbox yardımcı programlarıyla da şık olabilirsiniz.

Selam Dünya! Bu bir tost mesajıdır.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Ulaşılabilirlik

Tostlar, ziyaretçileriniz veya kullanıcılarınız için küçük kesintiler olması için tasarlanmıştır, bu nedenle ekran okuyucu ve benzeri yardımcı teknolojilere sahip olanlara yardımcı olmak için tostlarınızı bir aria-livebölgeye sarmalısınız . Canlı bölgelerde yapılan değişiklikler (bir tost bileşeninin enjekte edilmesi/güncellenmesi gibi), kullanıcının odağını değiştirmeye veya kullanıcının başka bir şekilde kesintiye uğramasına gerek kalmadan ekran okuyucular tarafından otomatik olarak duyurulur. Ek olarak, aria-atomic="true"yalnızca neyin değiştirildiğini duyurmak yerine (bu, tost içeriğinin yalnızca bir kısmını güncellerseniz veya aynı tost içeriğini görüntülerseniz sorunlara yol açabilir) yerine, tüm bildirimin her zaman tek bir (atomik) birim olarak duyurulmasını sağlayın. daha sonraki bir zamanda). Gerekli bilgiler süreç için önemliyse, örneğin bir formdaki hataların listesi için, o zaman uyarı bileşenini kullanın.tost yerine.

Tost oluşturulmadan veya güncellenmeden önce canlı bölgenin işaretlemede bulunması gerektiğini unutmayın . Her ikisini de aynı anda dinamik olarak oluşturur ve sayfaya eklerseniz, genellikle yardımcı teknolojiler tarafından duyurulmazlar.

Ayrıca içeriğe bağlı olarak roleve seviyeyi uyarlamanız gerekir. aria-liveHata gibi önemli bir mesajsa, öğesini kullanın role="alert" aria-live="assertive", aksi takdirde role="status" aria-live="polite"öznitelikleri kullanın.

Görüntülediğiniz içerik değiştikçe, kullanıcıların mesajı okumak için yeterli zamana sahip olmaları için delayzaman aşımını güncellediğinizden emin olun.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Kullanırken autohide: false, kullanıcıların tostu kapatmasına izin vermek için bir kapat düğmesi eklemelisiniz.

Selam Dünya! Bu bir tost mesajıdır.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Teknik olarak, tostunuza odaklanabilir/işlem yapılabilir kontroller (ek düğmeler veya bağlantılar gibi) eklemek mümkün olsa da, bunu otomatik gizlemek için yapmaktan kaçınmalısınız. Tost'a uzun bir delayzaman aşımı süresi verseniz bile , klavye ve yardımcı teknoloji kullanıcıları, harekete geçmek için tost'a zamanında ulaşmayı zor bulabilir (çünkü tostlar görüntülendiğinde odak almazlar). Kesinlikle daha fazla kontrole sahip olmanız gerekiyorsa, ile bir tost kullanmanızı öneririz autohide: false.

küstah

Değişkenler

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba($black, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

kullanım

Tostları JavaScript ile başlat:

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

tetikleyiciler

Görevden alma, aşağıda gösterildiği gibi tost içindekidata bir düğmedeki öznitelikle gerçekleştirilebilir :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

veya aşağıda gösterildiği gibi kullanarak tost dışındaki bir düğme üzerinde data-bs-target:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-bs-gibi ekleyin data-bs-animation="".

İsim	Tip	Varsayılan	Tanım
`animation`	boole	`true`	Tost'a bir CSS solma geçişi uygulayın
`autohide`	boole	`true`	Tostu otomatik gizle
`delay`	sayı	`5000`	Tostu gizlemeyi geciktir (ms)

yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın .

göstermek

Bir elementin tostunu ortaya çıkarır. Tost gerçekten gösterilmeden önce (yani shown.bs.toastolay meydana gelmeden önce) arayana döner. Bu yöntemi manuel olarak çağırmanız gerekir, bunun yerine tostunuz gösterilmez.

toast.show()

saklamak

Bir elementin tostunu gizler. Tost gerçekten gizlenmeden (yani hidden.bs.toastolay meydana gelmeden önce) arayana geri döner. Eğer yaptıysanız, bu yöntemi manuel olarak çağırmanız autohidegerekir false.

toast.hide()

elden çıkarmak

Bir elementin tostunu gizler. Tostunuz DOM'da kalacak ancak artık gösterilmeyecek.

toast.dispose()

getInstance

Bir DOM öğesiyle ilişkilendirilmiş tost örneğini almanızı sağlayan statik yöntem

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Bir DOM öğesiyle ilişkili tost örneğini almanıza veya başlatılmamış olması durumunda yeni bir tane oluşturmanıza olanak tanıyan statik yöntem

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Olaylar

Etkinlik tipi	Tanım
`show.bs.toast`	Bu olay, `show`örnek yöntemi çağrıldığında hemen tetiklenir.
`shown.bs.toast`	Bu olay, tost kullanıcıya görünür hale getirildiğinde tetiklenir.
`hide.bs.toast`	`hide`Bu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
`hidden.bs.toast`	Bu olay, tost kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})