Roti bakar

Tolak pemberitahuan kepada pelawat anda dengan roti bakar, mesej amaran yang ringan dan mudah disesuaikan.

Toast ialah pemberitahuan ringan yang direka bentuk untuk meniru pemberitahuan tolak yang telah dipopularkan oleh sistem pengendalian mudah alih dan desktop. Ia dibina dengan flexbox, jadi ia mudah untuk diselaraskan dan diletakkan.

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam toast:

Jika anda sedang membina JavaScript kami daripada sumber, ia memerlukanutil.js .
Roti bakar adalah ikut serta atas sebab prestasi, jadi anda mesti memulakannya sendiri .
Sila ambil perhatian bahawa anda bertanggungjawab untuk meletakkan roti bakar.
Roti bakar akan bersembunyi secara automatik jika anda tidak menyatakan autohide: false.

Kesan animasi komponen ini bergantung pada prefers-reduced-motionpertanyaan media. Lihat bahagian gerakan yang dikurangkan dalam dokumentasi kebolehaksesan kami .

Contoh

asas

Untuk menggalakkan roti bakar yang boleh dipanjangkan dan boleh diramal, kami mengesyorkan pengepala dan badan. Pengepala roti bakar menggunakan display: flex, membolehkan penjajaran kandungan yang mudah berkat utiliti margin dan flexbox kami.

Roti bakar adalah fleksibel seperti yang anda perlukan dan mempunyai sedikit penanda yang diperlukan. Sekurang-kurangnya, kami memerlukan satu elemen untuk mengandungi kandungan "panggang" anda dan amat menggalakkan butang tolak.

Hai dunia! Ini adalah mesej roti bakar.

<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>

Langsung

Klik butang di bawah untuk menunjukkan roti bakar (diletakkan dengan utiliti kami di penjuru kanan sebelah bawah) yang telah disembunyikan secara lalai dengan .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>

Lutsinar

Roti bakar sedikit lut sinar untuk sebati dengan apa yang ada di bawahnya.

Hai dunia! Ini adalah mesej roti bakar.

<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>

Menyusun

Apabila anda mempunyai berbilang roti bakar, kami lalai untuk menyusunnya secara menegak dengan cara yang boleh dibaca.

Nampak? Hanya seperti ini.

Makluman, roti bakar akan disusun secara automatik

<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>

Penempatan

Letakkan roti bakar dengan CSS tersuai mengikut keperluan anda. Bahagian atas sebelah kanan sering digunakan untuk pemberitahuan, begitu juga bahagian tengah atas. Jika anda hanya akan menunjukkan satu roti bakar pada satu masa, letakkan gaya kedudukan tepat pada .toast.

Hai dunia! Ini adalah mesej roti bakar.

<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>

Untuk sistem yang menjana lebih banyak pemberitahuan, pertimbangkan untuk menggunakan elemen pembalut supaya ia boleh disusun dengan mudah.

Nampak? Hanya seperti ini.

Makluman, roti bakar akan disusun secara automatik

<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>

Anda juga boleh berseronok dengan utiliti flexbox untuk menyelaraskan roti bakar secara mendatar dan/atau menegak.

Hai dunia! Ini adalah mesej roti bakar.

<!-- 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>

Kebolehcapaian

Roti bakar bertujuan untuk menjadi gangguan kecil kepada pelawat atau pengguna anda, jadi untuk membantu mereka yang mempunyai pembaca skrin dan teknologi bantuan yang serupa, anda harus membungkus roti bakar anda di aria-liverantau . Perubahan kepada kawasan langsung (seperti menyuntik/mengemas kini komponen roti bakar) diumumkan secara automatik oleh pembaca skrin tanpa perlu mengalihkan fokus pengguna atau mengganggu pengguna. Selain itu, sertakan aria-atomic="true"untuk memastikan bahawa keseluruhan roti bakar sentiasa diumumkan sebagai unit tunggal (atom), dan bukannya hanya mengumumkan perkara yang telah diubah (yang boleh membawa kepada masalah jika anda hanya mengemas kini sebahagian daripada kandungan roti bakar atau jika memaparkan kandungan roti bakar yang sama pada suatu ketika nanti). Jika maklumat yang diperlukan adalah penting untuk proses, cth untuk senarai ralat dalam borang, kemudian gunakan komponen amaranbukannya roti bakar.

Ambil perhatian bahawa rantau langsung perlu ada dalam penanda sebelum roti bakar dijana atau dikemas kini. Jika anda menjana kedua-duanya secara dinamik pada masa yang sama dan menyuntiknya ke dalam halaman, ia biasanya tidak akan diumumkan oleh teknologi bantuan.

Anda juga perlu menyesuaikan roledan aria-livetahap bergantung pada kandungan. Jika ia adalah mesej penting seperti ralat, gunakan role="alert" aria-live="assertive", jika tidak gunakan role="status" aria-live="polite"atribut.

Apabila kandungan yang anda paparkan berubah, pastikan anda mengemas kini delaytamat masa supaya pengguna mempunyai masa yang mencukupi untuk membaca roti bakar.

<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>

Apabila menggunakan autohide: false, anda mesti menambah butang tutup untuk membenarkan pengguna mengetepikan roti bakar.

Hai dunia! Ini adalah mesej roti bakar.

<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>

Walaupun secara teknikal adalah mungkin untuk menambah kawalan boleh fokus/boleh diambil tindakan (seperti butang atau pautan tambahan) dalam roti bakar anda, anda harus mengelak daripada melakukan ini untuk menyorokkan roti bakar secara automatik. Walaupun anda memberi roti bakar itu delaytamat masa yang lama , papan kekunci dan pengguna teknologi bantuan mungkin mendapati sukar untuk mencapai roti bakar tepat pada masanya untuk mengambil tindakan (memandangkan roti bakar tidak menerima fokus apabila ia dipaparkan). Jika anda benar-benar mesti mempunyai kawalan lanjut, kami mengesyorkan menggunakan roti bakar dengan autohide: false.

Tingkah laku JavaScript

Penggunaan

Mulakan roti bakar melalui JavaScript:

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

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-animation="".

Nama	taip	Lalai	Penerangan
animasi	boolean	benar	Gunakan peralihan pudar CSS ke roti bakar
autosembunyikan	boolean	benar	Auto sembunyikan roti bakar
kelewatan	nombor	`500`	Lengah menyembunyikan roti bakar (ms)

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

`$().toast(options)`

Melampirkan pengendali roti bakar pada koleksi elemen.

`.toast('show')`

Mendedahkan roti bakar elemen. Kembali kepada pemanggil sebelum roti bakar sebenarnya telah ditunjukkan (iaitu sebelum shown.bs.toastacara itu berlaku). Anda perlu memanggil kaedah ini secara manual, sebaliknya roti bakar anda tidak akan dipaparkan.

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

`.toast('hide')`

Menyembunyikan roti bakar elemen. Kembali kepada pemanggil sebelum roti bakar sebenarnya disembunyikan (iaitu sebelum hidden.bs.toastacara itu berlaku). Anda perlu memanggil kaedah ini secara manual jika anda autohidemembuat false.

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

`.toast('dispose')`

Menyembunyikan roti bakar elemen. Roti bakar anda akan kekal di DOM tetapi tidak akan dipaparkan lagi.

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

Peristiwa

Jenis acara	Penerangan
show.bs.toast	Peristiwa ini menyala serta-merta apabila `show`kaedah contoh dipanggil.
ditunjukkan.bs.toast	Peristiwa ini dicetuskan apabila roti bakar telah ditunjukkan kepada pengguna.
hide.bs.toast	Peristiwa ini dicetuskan serta-merta apabila `hide`kaedah contoh telah dipanggil.
hidden.bs.toast	Peristiwa ini dicetuskan apabila roti bakar telah selesai disembunyikan daripada pengguna.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})