in English

Tostlar

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

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:

  • JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .
  • Tostlar performans nedenleriyle isteğe bağlıdır, bu nedenle bunları kendiniz başlatmanız gerekir .
  • Tostları konumlandırmaktan sorumlu olduğunuzu lütfen unutmayın.
  • 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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Canlı

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

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

yarı saydam

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

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

İstifleme

Birden fazla tostunuz olduğunda, bunları varsayılan olarak okunabilir bir şekilde dikey olarak istifliyoruz.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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.

Önyükleme 11 dakika önce
Selam Dünya! Bu bir tost mesajıdır. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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şenini enjekte etmek/güncellemek 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-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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.

JavaScript davranışı

kullanım

Tostları JavaScript ile başlat:

$('.toast').toast(option)

Seçenekler

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

İsim Tip Varsayılan Tanım
animasyon boole doğru Tost'a bir CSS solma geçişi uygulayın
otomatik gizleme boole doğru Tostu otomatik gizle
gecikme sayı 500 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 .

$().toast(options)

Bir öğe koleksiyonuna bir tost işleyicisi ekler.

.toast('show')

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.

$('#element').toast('show')

.toast('hide')

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.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

Olaylar

Etkinlik tipi Tanım
show.bs.toast Bu olay, showörnek yöntemi çağrıldığında hemen tetiklenir.
gösterilen.bs.toast Bu olay, tost kullanıcıya görünür hale getirildiğinde tetiklenir.
sakla.bs.toast hideBu olay, örnek yöntemi çağrıldığında hemen tetiklenir .
gizli.bs.toast Bu olay, tost kullanıcıdan gizlenmeyi bitirdiğinde tetiklenir. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})