Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
in English

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, ngidini 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.

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

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

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

    toast.show()
  })
}

Tembus

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

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

html 
<div class="toast-container position-static">
  <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 utilitas flexbox kanggo nyetel tata letak.

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

html 
<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 ditambahake .text-bg-primarymenyang .toast, banjur ditambahake .btn-close-whitemenyang tombol cedhak. Kanggo pinggiran asri, kita mbusak wates gawan karo .border-0.

html 
<div class="toast align-items-center text-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.

Bootstrap 11 menit kepungkur
Hello, donya! Iki pesen roti panggang.
html 
<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 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.

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

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

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

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, roti panggang saiki nggunakake variabel CSS lokal .toastkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variabel Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Minangka opsi bisa liwati liwat atribut data utawa JavaScript, sampeyan bisa nambah jeneng pilihan kanggo data-bs-, kaya ing data-bs-animation="{value}". Priksa manawa kanggo ngganti jinis kasus jeneng pilihan saka " camelCase " kanggo " kebab-case " nalika ngliwati pilihan liwat atribut data. Contone, nggunakake data-bs-custom-class="beautifier"tinimbang data-bs-customClass="beautifier".

Ing Bootstrap 5.2.0, kabeh komponen ndhukung atribut data sing dilindhungi eksperimendata-bs-config sing bisa ngemot konfigurasi komponen sing prasaja minangka string JSON. Nalika unsur duwe data-bs-config='{"delay":0, "title":123}'lan data-bs-title="456"atribut, titlenilai pungkasan bakal 456lan atribut data sing kapisah bakal ngilangi nilai sing diwenehake ing data-bs-config. Kajaba iku, atribut data sing ana bisa ngemot nilai JSON kaya data-bs-delay='{"show":0,"hide":150}'.

jeneng Jinis Default Katrangan
animation boolean true Gunakake transisi fade CSS menyang roti panggang.
autohide boolean true Kanthi otomatis ndhelikake roti panggang sawise wektu tundha.
delay nomer 5000 Tundha ing milliseconds sadurunge ndhelikake roti panggang.

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 .

Metode Katrangan
dispose Ndhelikake roti panggang unsur. Roti panggang sampeyan bakal tetep ana ing DOM nanging ora bakal ditampilake maneh.
getInstance Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM.
Contone: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Ngasilake conto roti panggang Bootstrap.
getOrCreateInstance Cara statis sing ngidini sampeyan entuk conto roti panggang sing ana gandhengane karo unsur DOM, utawa nggawe sing anyar, yen ora diwiwiti.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Ngasilake conto roti panggang Bootstrap.
hide 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
isShown Ngasilake boolean miturut status visibilitas roti panggang.
show 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.

Acara

Acara Katrangan
hide.bs.toast Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.toast Acara iki dipecat nalika roti panggang wis rampung didhelikake saka pangguna.
show.bs.toast Acara iki langsung murub nalika showmetode conto diarani.
shown.bs.toast Acara iki dipecat nalika roti panggang wis katon kanggo pangguna. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})