Toast ng Bootstrap 5

Toast (Tos)

Toast na komponente ay katulad ng warning box, kapag nangyayari ang anumang bagay (halimbawa kapag inilagay ang button ng user, isumite ang form, atbp.), ito ay magpapakita lamang ng ilang segundo.

Kung paano lumikha ng Toast

Kapag nais ninyong lumikha ng Toast, gamitin ang .toast klaseng, at magdagdag ng .toast-header at .toast-body.

Bilang paalala:Bilang default, ang toast ay nakahiding. Kapag nais ninyong ipakita ito, gamitin ang .show klaseng. Kapag nais ninyong isara ito, gamitin ang <button> elemento at magdagdag ng data-bs-dismiss="toast":

<div class="toast show">
  <div class="toast-header">
    Pamagat ng Toast
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Teksto sa pangunahing bahagi ng Toast.
  </div>
</div>

Subukan ang sarili

Buksan ang Toast

Kapag nais ninyong ipakita ang Toast sa pamamagitan ng pagpindot sa pindutan, dapat ninyong inilalagay sa JavaScript ang pagkilala: pumili ng tinukoy na elemento at tumawag sa toast() Mga paraan.

Kapag inililipat ninyo ang pindutan, ang sumusunod na kodigo ay magpapakita ng lahat ng toast sa dokumento:

Mga halimbawa

<script>
document.getElementById("toastbtn").onclick = function() {
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function(toastEl) {
    return new bootstrap.Toast(toastEl)
  )
  toastList.forEach(toast => toast.show())
}
</script>

Subukan ang sarili