Toasts

Push zviziviso kune vashanyi vako ine toast, yakareruka uye inogoneka nyore yambiro meseji.

Pa peji ino

Toasts zviziviso zvakareruka zvakagadzirirwa kutevedzera zviziviso zvepush izvo zvakafarirwa nenharembozha uye desktop inoshanda masisitimu. Iwo akavakwa neflexbox, saka ari nyore kurongedza uye chinzvimbo.

Overview

Zvinhu zvekuziva kana uchishandisa toast plugin:

Toasts inosarudza-kupinda nekuda kwezvikonzero zvekuita, saka iwe unofanirwa kuzvitangisa iwe pachako .
Toasts inongozvivanza kana ukasatsanangura autohide: false.

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Mienzaniso

Basic

Kuti tikurudzire ma toast anowedzera uye anofano zivikanwa, tinokurudzira musoro nemuviri. Toast misoro inoshandisa display: flex, ichibvumira kurongeka kuri nyore kwemukati nekuda kwemargin uye flexbox zvishandiso.

Toasts anochinjika sezvaunoda uye ane mashoma anodiwa markup. Zvirinani, isu tinoda chinhu chimwe chete kuti chive nezvako "zvakaomeswa" uye kukurudzira zvakasimba bhatani rekudzinga.

Mhoro, nyika! Iri ishoko re toast.

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

Rarama

Dzvanya bhatani riri pazasi kuratidza toast (yakamisikidzwa nezvishandiso zvedu pakona yekurudyi) iyo yakavanzwa nekusarudzika ne .hide.

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

Translucent

Toasts anopenya zvishoma kuti asanganise nezviri pazasi pawo.

Mhoro, nyika! Iri ishoko re toast.

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

Stacking

Iwe unogona kurongedza toast nekuzviputira mumudziyo wekuputira, izvo zvinozowedzera kuwedzera imwe nzvimbo.

Maona? Sezvizvi.

Musoro kumusoro, toasts inozomira otomatiki

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

Custom content

Gadzirisa ma toast ako nekubvisa madiki-zvikamu, uchiabatanidza nezvishandiso , kana nekuwedzera yako markup. Pano takagadzira toast yakapfava nekubvisa iyo yakasarudzika .toast-header, tichiwedzera tsika yekuvanza icon kubva kuBootstrap Icons , uye kushandisa zvimwe flexbox utilities kugadzirisa marongero.

Mhoro, nyika! Iri ishoko re toast.

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

Neimwe nzira, iwe unogona zvakare kuwedzera mamwe ekudzora uye zvikamu kune toast.

Mhoro, nyika! Iri ishoko re toast.

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

Zvirongwa zvemavara

Kuvaka pamuenzaniso wepamusoro, unogona kugadzira akasiyana toast color scheme neruvara rwedu uye zvemashure zvinoshandiswa . Pano tawedzera .bg-primaryuye .text-whitekune iyo .toast, uye towedzera .btn-close-whitekune yedu yekuvhara bhatani. Kune crisp mupendero, tinobvisa muganho wakasarudzika ne .border-0.

Mhoro, nyika! Iri ishoko re toast.

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

Placement

Isa ma toast ane tsika CSS sezvaunoda iwo. Kurudyi kwepamusoro kunowanzo shandiswa pazviziviso, sezvakaita wepakati wepamusoro. Kana uchizongoratidza tositi imwe chete panguva, isa zvitaera zvekumisikidza ipapo chaipo .toast.

Mhoro, nyika! Iri ishoko re toast.

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

Kune masisitimu anogadzira zviziviso zvakawanda, funga kushandisa chinhu chekuputira kuti zvigone kurongedza zviri nyore.

Maona? Sezvizvi.

Musoro kumusoro, toasts inozomira otomatiki

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

Iwe unogona zvakare kuwana fancy neflexbox utilities kuti uenzanise toasts yakatwasuka uye/kana yakatwasuka.

Mhoro, nyika! Iri ishoko re toast.

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

Accessibility

Toasts inoitirwa kuve kukanganisa kudiki kune vashanyi vako kana vashandisi, saka kubatsira avo vane skrini yekuverenga uye yakafanana tekinoroji yekubatsira, unofanirwa kuputira ma toast ako aria-livemunharaunda . Shanduko kumatunhu anogara (sekubaya jekiseni / kuvandudza chikamu chetositi) anoziviswa otomatiki nevaverengi vescreen pasina chikonzero chekufambisa chinotariswa nemushandisi kana kukanganisa mushandisi. Pamusoro pezvo, sanganisira aria-atomic="true"kuve nechokwadi chekuti toast yese inogara ichiziviswa sechinhu chimwe chete (atomic) unit, pane kungozivisa zvakachinjwa (izvo zvinogona kuunza matambudziko kana iwe ukangogadzirisa chikamu cheiyo toast zvirimo, kana kuratidza zvakafanana zvirimo. munguva inotevera). Kana ruzivo rwuri kudiwa rwakakosha pakuita, semuenzaniso kune rondedzero yezvikanganiso mufomu, zvino shandisa chikamu chekuzivisa .panzvimbo yetoast.

Ziva kuti nharaunda mhenyu inoda kuvepo mumarkup isati yagadzirwa kana kuvandudzwa. Kana iwe ukagadzira zvese zviri zviviri panguva imwe chete uye wozvipinza mupeji, hazviwanzo kuziviswa neanobatsira matekinoroji.

Iwe zvakare unofanirwa kugadzirisa iyo roleuye aria-livenhanho zvichienderana nezviri mukati. Kana iri meseji yakakosha senge kukanganisa, shandisa role="alert" aria-live="assertive", kana zvisina kudaro shandisa role="status" aria-live="polite"hunhu.

Sezvo zvirimo zvauri kuratidza zvachinja, ita chokwadi chekugadzirisa delaynguva yekubuda kuitira kuti vashandisi vawane nguva yakakwana yekuverenga toast.

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

Paunenge uchishandisa autohide: false, iwe unofanirwa kuwedzera bhatani rekuvhara kuti ubvumire vashandisi kudzinga toast.

Mhoro, nyika! Iri ishoko re toast.

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

Nepo tekinoroji zvichikwanisika kuwedzera zvinotariswa/zvinoita zvidzoreso (zvakadai semamwe mabhatani kana zvinongedzo) mune yako toast, iwe unofanirwa kudzivirira kuita izvi kune autohiding toasts. Kunyangwe iwe ukapa toast nguva yakareba delay, vashandisi vekhibhodi uye yekubatsira tekinoroji vangaomerwa nekusvika kune toast nenguva kutora chiito (sezvo toast isingagamuchire kutarisa kana ichiratidzwa). Kana iwe uchifanirwa kuve nekumwe kutonga, tinokurudzira kushandisa toast ine autohide: false.

Sass

Variables

$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(0, 0, 0, .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(0, 0, 0, .05);

Usage

Tanga toasts kuburikidza neJavaScript:

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

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-bs-, semu data-bs-animation="".

Zita	Type	Default	Tsanangudzo
`animation`	boolean	`true`	Isa CSS fade shanduko kune toast
`autohide`	boolean	`true`	Auto viga toast
`delay`	nhamba	`5000`	Kunonoka kuvanza toast (ms)

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

show

Inoratidza toast yechinhu. Inodzokera kumunhu anodaidzira isati yanyatsoratidzwa (kureva kuti shown.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira, pachinzvimbo chako toast hairatidze.

toast.show()

hide

Inovanza toast yechimwe chinhu. Inodzokera kumunhu anodaidzira isati yanyatsovanzwa (kureva kuti hidden.bs.toastchiitiko chisati chaitika). Iwe unofanirwa kufonera iyi nzira kana iwe wakaita autohideku false.

toast.hide()

kurasa

Inovanza toast yechimwe chinhu. Toast yako icharamba iri paDOM asi haicharatidzike zvakare.

toast.dispose()

getInstance

Static nzira iyo inokutendera iwe kuti uwane iyo scrollspy muenzaniso yakabatana neDOM chinhu

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

getOrCreateInstance

Static nzira iyo inokutendera iwe kuti uwane iyo scrollspy muenzaniso yakabatana neDOM chinhu, kana kugadzira imwe nyowani kana isina kutangwa.

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

Zviitiko

Chiitiko mhando	Tsanangudzo
`show.bs.toast`	Ichi chiitiko chinopisa nekukasira kana `show`nzira yemuenzaniso inodanwa.
`shown.bs.toast`	Ichi chiitiko chinodzingwa kana toast yaitwa kuti ionekwe kumushandisi.
`hide.bs.toast`	Ichi chiitiko chinodzingwa nekukasira kana iyo `hide`muenzaniso nzira yadaidzwa.
`hidden.bs.toast`	Ichi chiitiko chinodzingwa kana toast yapedza kuvanzwa kubva kumushandisi.

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