Source

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 hizalanmaları ve konumlandırılmaları 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>

yarı saydam

Tostlar da biraz yarı saydamdır, bu yüzden üzerinde görünen her şeyin üzerine karışırlar. CSS özelliğini destekleyen tarayıcılar için backdrop-filter, öğeleri bir tost altında bulanıklaştırmaya da çalışacağız.

<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="min-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"neyin değiştirildiğini duyurmak yerine (ki bu, tost içeriğinin yalnızca bir kısmını güncellerseniz veya aynı tost içeriğini daha sonraki bir zaman noktası). 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, insanların mesajı okumak için yeterli zamana sahip olmasını sağlamak 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>

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 arayana 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...
})