Toasts

Push kabar menyang pengunjung kanthi roti panggang, pesen tandha sing entheng lan gampang disesuaikan.

Ing kaca iki

Toasts minangka kabar entheng sing dirancang kanggo niru kabar push sing wis dipopulerkan dening sistem operasi seluler lan desktop. Lagi dibangun karo flexbox, supaya padha gampang kanggo kempal lan posisi.

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin roti panggang:

Toasts dipilih amarga alasan kinerja, mula sampeyan kudu miwiti dhewe .
Toasts bakal kanthi otomatis ndhelikake yen sampeyan ora nemtokake autohide: false.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Tuladha

dhasar

Kanggo kasurung roti panggang extensible lan katebak, disaranake header lan awak. Header roti panggang digunakake display: flex, supaya gampang nyelarasake isi amarga utilitas margin lan flexbox.

Toasts minangka fleksibel sing dibutuhake lan duwe markup sing dibutuhake. Paling ora, kita mbutuhake unsur siji kanggo ngemot isi "panggang" lan banget nyengkuyung tombol ngilangi.

Hello, donya! Iki pesen roti panggang.

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

Sadurunge, skrip kita nambahake .hidekelas kanthi dinamis kanggo ndhelikake roti panggang (karo display:none, tinimbang mung karo opacity:0). Iki saiki ora perlu maneh. Nanging, kanggo kompatibilitas mundur, skrip kita bakal terus ngalih kelas kasebut (sanajan ora ana kabutuhan praktis) nganti versi utama sabanjure.

Tuladha urip

Klik tombol ing ngisor iki kanggo nuduhake roti panggang (dipanggonke karo keperluan kita ing pojok tengen ngisor) sing wis didhelikake minangka standar.

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>

Kita nggunakake JavaScript ing ngisor iki kanggo micu demo roti panggang langsung:

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

    toast.show()
  })
}

Tembus

Roti panggang rada tembus kanggo nyampur karo apa sing ana ing ngisor iki.

Hello, donya! Iki pesen roti panggang.

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

Numpuk

Sampeyan bisa numpuk roti panggang kanthi mbungkus ing wadhah roti panggang, sing bakal nambah spasi kanthi vertikal.

weruh? Kaya iki.

Kepala munggah, toasts bakal tumpukan otomatis

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

Konten khusus

Kustomisasi roti panggang kanthi mbusak subkomponen, ngapiki nganggo utilitas , utawa nambah markup sampeyan dhewe. Ing kene kita wis nggawe roti panggang sing luwih gampang kanthi mbusak standar .toast-header, nambah lambang ndhelik khusus saka Ikon Bootstrap , lan nggunakake sawetara keperluan flexbox kanggo nyetel tata letak.

Hello, donya! Iki pesen roti panggang.

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

Utawa, sampeyan uga bisa nambah kontrol lan komponen tambahan kanggo roti panggang.

Hello, donya! Iki pesen roti panggang.

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

Skema warna

Mbangun conto ing ndhuwur, sampeyan bisa nggawe skema warna roti panggang sing beda karo utilitas warna lan latar mburi. Ing kene kita wis nambah .bg-primarylan .text-whitemenyang .toast, banjur ditambahake .btn-close-whitemenyang tombol cedhak. Kanggo pinggiran asri, kita mbusak wates gawan karo .border-0.

Hello, donya! Iki pesen roti panggang.

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

Panggonan

Selehake roti panggang nganggo CSS khusus sing dibutuhake. Ing sisih tengen ndhuwur asring digunakake kanggo kabar, kaya ing tengah ndhuwur. Yen sampeyan mung arep nuduhake roti panggang siji-sijine, pasang gaya posisi ing sisih tengen .toast.

Hello, donya! Iki pesen roti panggang.

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

Kanggo sistem sing ngasilake luwih akeh kabar, coba gunakake unsur bungkus supaya bisa tumpukan kanthi gampang.

weruh? Kaya iki.

Kepala munggah, toasts bakal tumpukan otomatis

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

Sampeyan uga bisa seneng karo keperluan flexbox kanggo nyelarasake roti panggang kanthi horisontal lan / utawa vertikal.

Hello, donya! Iki pesen roti panggang.

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

Aksesibilitas

Toasts dimaksudake minangka gangguan cilik kanggo pengunjung utawa pangguna, mula kanggo mbantu wong sing maca layar lan teknologi bantuan sing padha, sampeyan kudu mbungkus roti panggang ing aria-livewilayah . Owah-owahan ing wilayah urip (kayata nyuntikake/nganyarake komponen roti panggang) diumumake kanthi otomatis dening pembaca layar tanpa perlu mindhah fokus pangguna utawa ngganggu pangguna. Kajaba iku, kalebu aria-atomic="true"kanggo mesthekake yen kabeh roti panggang tansah diumumake minangka unit tunggal (atom), tinimbang mung ngumumake apa sing diganti (sing bisa nyebabake masalah yen sampeyan mung nganyari bagean saka isi roti panggang, utawa yen nampilake isi roti panggang sing padha. ing wektu mengko). Yen informasi sing dibutuhake penting kanggo proses kasebut, contone kanggo dhaptar kesalahan ing wangun, banjur gunakake komponen tandhatinimbang roti panggang.

Elinga yen wilayah urip kudu ana ing markup sadurunge roti panggang digawe utawa dianyari. Yen sampeyan ngasilake kanthi dinamis ing wektu sing padha lan nyuntikake menyang kaca, umume ora bakal diumumake dening teknologi bantu.

Sampeyan uga kudu ngganti rolelan aria-livetingkat gumantung isi. Yen pesen penting kaya kesalahan, gunakake role="alert" aria-live="assertive", utawa gunakake role="status" aria-live="polite"atribut.

Nalika konten sing sampeyan tampilake owah-owahan, priksa manawa sampeyan nganyari delaywektu entek supaya pangguna duwe wektu sing cukup kanggo maca roti panggang.

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

Nalika nggunakake autohide: false, sampeyan kudu nambah tombol cedhak kanggo ngidini pangguna ngilangi roti panggang.

Hello, donya! Iki pesen roti panggang.

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

Nalika sacara teknis bisa nambah kontrol sing bisa fokus/bisa ditindakake (kayata tombol utawa tautan tambahan) ing roti panggang, sampeyan kudu ngindhari iki kanggo ndhelikake roti panggang otomatis. Malah yen sampeyan menehi roti panggang delaywektu entek dawa , keyboard lan teknologi assistive pangguna bisa nemokake angel kanggo nggayuh roti panggang ing wektu kanggo njupuk tindakan (amarga roti panggang ora nampa fokus nalika ditampilake). Yen sampeyan pancen kudu duwe kontrol luwih, disaranake nggunakake roti panggang karo autohide: false.

Sass

Variabel

$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);

Panggunaan

Miwiti roti panggang liwat JavaScript:

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

Pemicu

Pembubaran bisa digayuh kanthi dataatribut ing tombol ing roti panggang kaya sing dituduhake ing ngisor iki:

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

utawa ing tombol ing njaba roti panggang nggunakake data-bs-targetkaya sing dituduhake ing ngisor iki:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-bs-, kaya ing data-bs-animation="".

jeneng	Jinis	Default	Katrangan
`animation`	boolean	`true`	Gunakake transisi fade CSS menyang roti panggang
`autohide`	boolean	`true`	Otomatis ndhelikake roti panggang
`delay`	nomer	`5000`	Tundha ndhelikake roti panggang (ms)

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

nuduhake

Nuduhake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang wis bener ditampilake (yaiku sadurunge shown.bs.toastacara dumadi). Sampeyan kudu nelpon cara iki kanthi manual, tinimbang roti panggang sampeyan ora bakal ditampilake.

toast.show()

ndhelikake

Ndhelikake roti panggang unsur. Bali menyang panelpon sadurunge roti panggang bener-bener didhelikake (yaiku sadurunge hidden.bs.toastacara kasebut kedadeyan). Sampeyan kudu nelpon cara iki kanthi manual yen sampeyan nggawe autohide.false

toast.hide()

mbuwang

Ndhelikake roti panggang unsur. Roti panggang sampeyan bakal tetep ana ing DOM nanging ora bakal ditampilake maneh.

toast.dispose()

getInstance

Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM

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

getOrCreateInstance

Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar yen ora diwiwiti.

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

Acara

Jenis acara	Katrangan
`show.bs.toast`	Acara iki langsung murub nalika `show`metode conto diarani.
`shown.bs.toast`	Acara iki dipecat nalika roti panggang wis katon kanggo pangguna.
`hide.bs.toast`	Acara iki langsung dipecat nalika `hide`metode conto wis diarani.
`hidden.bs.toast`	Acara iki dipecat nalika roti panggang wis rampung didhelikake saka pangguna.

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