Roti bakar

Push bewara ka sémah anjeun kalayan roti bakar, pesen waspada anu hampang sareng gampang disesuaikan.

Dina kaca ieu

Toasts mangrupikeun béwara hampang anu dirancang pikeun niru béwara push anu parantos dipopulerkeun ku sistem operasi mobile sareng desktop. Aranjeunna nuju diwangun ku flexbox, ngarah geus gampang pikeun align sarta posisi.

Ihtisar

Hal-hal anu kedah terang nalika nganggo plugin roti bakar:

Toasts dipilih pikeun alesan kinerja, jadi Anjeun kudu initialize aranjeunna sorangan .
Roti bakar bakal otomatis nyumput upami anjeun henteu netepkeun autohide: false.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Contona

Dasar

Pikeun ajak toasts extensible tur bisa diprediksi, kami nyarankeun lulugu jeung awak. Panggunaan header roti bakar display: flex, ngamungkinkeun alignment gampang eusi berkat margin sareng flexbox utiliti kami.

Toasts téh sakumaha fléksibel sakumaha nu peryogi tur mibanda pisan saeutik markup diperlukeun. Sahenteuna, urang merlukeun hiji unsur ngandung eusi "toasted" anjeun sarta niatna ajak hiji tombol ngilangkeun.

Halo Dunya! Ieu pesen roti bakar.

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

Saméméhna, Aksara kami dinamis ditambahkeun .hidekelas pikeun sakabéhna nyumputkeun roti bakar a (kalawan display:none, tinimbang ngan kalawan opacity:0). Ieu ayeuna teu perlu deui. Tapi, pikeun kasaluyuan mundur, naskah urang bakal terus togél kelas (sanajan teu aya kabutuhan praktis pikeun eta) nepi ka versi utama salajengna.

Hirup conto

Pencét tombol di handap pikeun nunjukkeun roti bakar (diposisikan sareng utilitas kami di pojok katuhu handap) anu disumputkeun sacara 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>

Kami nganggo JavaScript di handap ieu pikeun memicu demo roti bakar langsung kami:

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 cahaya

Roti bakar rada tembus pikeun nyampur sareng anu aya di handapna.

Halo Dunya! Ieu pesen roti bakar.

<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

Anjeun tiasa tumpukan roti bakar ku mungkus aranjeunna dina wadah roti bakar, anu sacara vertikal bakal nambihan sababaraha jarak.

Tingali? Sapertos kieu.

Punten, roti bakar bakal otomatis tumpukan

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

eusi custom

Sesuaikeun roti bakar anjeun ku ngaleungitkeun sub-komponén, tweaking sareng utilitas , atanapi ku nambihan markup anjeun nyalira. Di dieu kami geus nyieun roti bakar basajan ku nyoplokkeun standar .toast-header, nambahkeun ikon sumputkeun custom ti Ikon Bootstrap , sarta ngagunakeun sababaraha utiliti flexbox pikeun nyaluyukeun tata perenah.

Halo Dunya! Ieu pesen roti bakar.

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

Alternatipna, anjeun ogé tiasa nambihan kadali tambahan sareng komponén kana roti bakar.

Halo Dunya! Ieu pesen roti bakar.

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

Skéma warna

Ngawangun conto di luhur, anjeun tiasa nyiptakeun skéma warna roti bakar anu béda-béda nganggo warna sareng utilitas latar urang. Di dieu kami geus ditambahkeun .bg-primaryjeung .text-whiteka .toast, lajeng ditambahkeun .btn-close-whitekana tombol nutup urang. Pikeun tepi garing, urang nyabut wates standar kalawan .border-0.

Halo Dunya! Ieu pesen roti bakar.

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

panempatan

Tempat roti bakar sareng CSS khusus nalika anjeun peryogikeun. Katuhu luhur sering dianggo pikeun béwara, sapertos tengah luhur. Upami anjeun ngan ukur bakal nunjukkeun hiji roti bakar dina hiji waktos, pasang gaya posisi langsung dina .toast.

Halo Dunya! Ieu pesen roti bakar.

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

Pikeun sistem anu ngahasilkeun langkung seueur bewara, pertimbangkeun ngagunakeun unsur bungkus supados gampang tumpukan.

Tingali? Sapertos kieu.

Punten, roti bakar bakal otomatis tumpukan

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

Anjeun oge bisa meunang fancy kalawan utiliti flexbox pikeun align toasts horisontal jeung / atawa vertikal.

Halo Dunya! Ieu pesen roti bakar.

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

Roti bakar dimaksudkeun pikeun ngaganggu leutik pikeun sémah atanapi pangguna anjeun, janten pikeun ngabantosan pamiarsa layar sareng téknologi pitulung anu sami, anjeun kedah ngabungkus roti bakar anjeun di aria-livedaérah . Parobihan kana daérah hirup (sapertos nyuntik/ngamutahirkeun komponén roti bakar) sacara otomatis diumumkeun ku pamiarsa layar tanpa kedah ngalihkeun fokus pangguna atanapi upami henteu ngaganggu pangguna. Sajaba, kaasup aria-atomic="true"pikeun mastikeun yén sakabéh roti bakar salawasna diumumkeun salaku unit tunggal (atom), tinimbang ngan ngumumkeun naon robah (anu bisa ngakibatkeun masalah mun anjeun ngan ngamutahirkeun bagian tina eusi roti bakar urang, atawa lamun mintonkeun eusi roti bakar sarua. dina waktos engké). Upami inpormasi anu diperyogikeun penting pikeun prosés, contona pikeun daptar kasalahan dina bentuk, teras nganggo komponén waspadatinimbang roti bakar.

Catet yén daérah langsung kedah aya dina markup sateuacan roti bakar didamel atanapi diropéa. Upami anjeun sacara dinamis ngahasilkeun duanana dina waktos anu sami sareng nyuntikkeun kana halaman, aranjeunna umumna moal diumumkeun ku téknologi anu ngabantosan.

Anjeun oge kudu adaptasi rolejeung aria-livetingkat gumantung kana eusi. Upami éta pesen penting sapertos kasalahan, paké role="alert" aria-live="assertive", upami henteu nganggo role="status" aria-live="polite"atribut.

Nalika eusi anu anjeun tampilkeun robih, pastikeun pikeun ngapdet waktos delaybéak supados pangguna gaduh waktos anu cekap pikeun maca roti bakar.

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

Lamun make autohide: false, Anjeun kudu nambahkeun hiji tombol nutup pikeun ngidinan pamaké pikeun ngilangkeun roti bakar.

Halo Dunya! Ieu pesen roti bakar.

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

Sanaos sacara téknis tiasa nambihan kadali anu tiasa difokuskeun / tiasa dilampahkeun (sapertos tombol tambahan atanapi tautan) dina roti bakar anjeun, anjeun kedah ngahindarkeun ieu pikeun nyumputkeun roti bakar otomatis. Sanaos anjeun masihan roti bakar waktos delayseep panjang , keyboard sareng pangguna téknologi asistip tiasa sesah ngahontal roti bakar dina waktosna nyandak tindakan (sabab roti bakar henteu nampi fokus nalika ditampilkeun). Upami anjeun leres-leres kedah gaduh kadali salajengna, kami nyarankeun ngagunakeun roti bakar sareng 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);

Pamakéan

Initialize toasts via JavaScript:

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

Pemicu

PHK tiasa dihontal ku dataatribut dina tombol dina roti bakar sapertos anu dipidangkeun di handap ieu:

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

atawa dina tombol di luar roti bakar ngagunakeun data-bs-targetsakumaha ditémbongkeun di handap ieu:

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

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-bs-, sapertos dina data-bs-animation="".

Ngaran	Tipe	Default	Katerangan
`animation`	boolean	`true`	Larapkeun transisi luntur CSS kana roti bakar
`autohide`	boolean	`true`	Otomatis nyumputkeun roti bakar
`delay`	angka	`5000`	Tunda nyumputkeun roti bakar (ms)

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

nempokeun

Nembongkeun roti bakar unsur. Mulih ka nu nelepon saméméh roti bakar sabenerna geus ditémbongkeun (ie saméméh shown.bs.toastacara lumangsung). Anjeun kedah nyauran metode ieu sacara manual, tibatan roti bakar anjeun moal ditingalikeun.

toast.show()

nyumput

Nyumputkeun roti bakar unsur. Mulih ka panelepon saméméh roti bakar sabenerna geus disumputkeun (ie saméméh hidden.bs.toastacara lumangsung). Anjeun kedah nyauran metode ieu sacara manual upami anjeun autohidedamel false.

toast.hide()

miceun

Nyumputkeun roti bakar unsur. Roti bakar anjeun bakal tetep aya dina DOM tapi moal ditingalikeun deui.

toast.dispose()

getInstance

Metodeu statik anu ngamungkinkeun anjeun kéngingkeun conto roti bakar anu aya hubunganana sareng unsur DOM

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

getOrCreateInstance

Métode statik anu ngamungkinkeun anjeun kéngingkeun conto roti bakar anu aya hubunganana sareng unsur DOM, atanapi ngadamel anu énggal upami henteu diinisialisasi.

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

Kajadian

Jenis acara	Katerangan
`show.bs.toast`	Kajadian ieu langsung hurung nalika `show`metode conto disebut.
`shown.bs.toast`	Acara ieu dipecat nalika roti bakar parantos katingali ku pangguna.
`hide.bs.toast`	Kajadian ieu langsung dipecat nalika `hide`metode conto parantos disebut.
`hidden.bs.toast`	Kajadian ieu dipecat nalika roti bakar parantos disumputkeun tina pangguna.

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