Laktawan sa panguna nga sulud Laktaw sa docs navigation
in English

Mga toast

Iduso ang mga pahibalo sa imong mga bisita gamit ang usa ka toast, usa ka gaan ug dali nga mapasibo nga mensahe sa alerto.

Niini nga panid

Ang mga toast kay gaan nga mga abiso nga gidesinyo sa pagsundog sa mga abiso sa pagduso nga gipasikat sa mga operating system sa mobile ug desktop. Gitukod kini gamit ang flexbox, mao nga dali kini nga i-align ug posisyon.

Overview

Mga butang nga mahibal-an kung gamiton ang toast plugin:

  • Ang mga toast gi-opt-in tungod sa mga hinungdan sa performance, mao nga ikaw mismo ang mag-initialize niini .
  • Awtomatikong itago ang mga toast kung dili nimo isulti autohide: false.
Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Mga pananglitan

sukaranan

Aron madasig ang mapalapad ug matag-an nga mga toast, among girekomenda ang usa ka header ug lawas. Ang mga ulohan sa toast gigamit display: flex, nga nagtugot sa dali nga pag-align sa sulud salamat sa among margin ug flexbox nga mga gamit.

Ang mga toast kay flexible sama sa imong gikinahanglan ug gamay ra kaayo ang gikinahanglang markup. Sa labing gamay, nanginahanglan kami usa ka elemento nga adunay sulud sa imong "toasted" nga sulud ug kusganon nga gidasig ang usa ka butones nga i-dismiss.

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

Mabuhi

I-klik ang buton sa ubos aron ipakita ang usa ka toast (nabutang sa among mga utilities sa ubos nga tuo nga suok) nga gitago sa default gamit ang .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

Ang mga toast medyo translucent aron masagol sa kung unsa ang naa sa ubos niini.

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

Pag-stack

Mahimo nimong i-stack ang mga toast pinaagi sa pagputos niini sa usa ka sudlanan sa toast, nga makadugang sa pipila ka gilay-on.

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

Ipasibo ang imong mga toast pinaagi sa pagtangtang sa mga sub-sangkap, pag-tweak niini gamit ang mga utilities , o pinaagi sa pagdugang sa imong kaugalingon nga marka. Dinhi naghimo kami og usa ka mas simple nga toast pinaagi sa pagtangtang sa default .toast-header, pagdugang og custom hide icon gikan sa Bootstrap Icons , ug paggamit sa pipila ka flexbox utilities aron ma-adjust ang layout.

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

Sa laing bahin, mahimo ka usab makadugang dugang nga mga kontrol ug sangkap sa mga 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>

Mga laraw sa kolor

Pagtukod sa panig-ingnan sa ibabaw, makahimo ka og lain-laing mga laraw sa kolor sa toast gamit ang among mga gamit sa kolor ug background . Dinhi among gidugang .bg-primaryug .text-whitesa .toast, ug dayon gidugang .btn-close-whitesa among close button. Alang sa usa ka presko nga ngilit, among tangtangon ang default nga utlanan sa .border-0.

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

Pagpahimutang

Ibutang ang mga toast nga adunay naandan nga CSS kung kinahanglan nimo kini. Ang taas nga tuo kanunay nga gigamit alang sa mga pahibalo, sama sa taas nga tunga. Kung magpakita ka lang ug usa ka toast matag higayon, ibutang ang mga istilo sa pagpoposisyon diha mismo sa .toast.

Bootstrap 11 mins ang milabay
Hello, kalibutan! Kini usa ka mensahe sa 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>

Para sa mga sistema nga makamugna og dugang nga mga abiso, ikonsiderar ang paggamit sa usa ka elemento sa pagputos aron dali silang ma-stack.

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

Mahimo ka usab nga madani sa mga gamit sa flexbox aron i-align ang mga toast nga pinahigda ug / o patindog.

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

Ang mga toast gituyo aron mahimong gamay nga paghunong sa imong mga bisita o tiggamit, busa aron matabangan kadtong adunay mga screen reader ug parehas nga mga teknolohiya sa pagtabang, kinahanglan nimo nga ibalot ang imong mga toast sa usa ka aria-liverehiyon . Ang mga pagbag-o sa mga buhi nga rehiyon (sama sa pag-inject/pag-update sa usa ka bahin sa toast) awtomatik nga gipahibalo sa mga magbabasa sa screen nga dili kinahanglan nga ibalhin ang pokus sa gumagamit o kung dili makabalda sa tiggamit. Dugang pa, ilakip aria-atomic="true"aron masiguro nga ang tibuok nga toast kanunay nga gipahibalo isip usa ka (atomic) nga yunit, imbes nga ipahibalo lang kung unsa ang nabag-o (nga mahimong mosangpot sa mga problema kung imong i-update ang bahin sa sulod sa toast, o kung magpakita sa samang sulod sa toast. sa ulahi nga punto sa panahon). Kung ang impormasyon nga gikinahanglan importante alang sa proseso, pananglitan sa listahan sa mga sayop sa usa ka porma, unya gamita ang alert componentimbes nga toast.

Timan-i nga ang buhi nga rehiyon kinahanglan nga anaa sa markup sa dili pa ang toast namugna o updated. Kung dinamikong imong gimugna ang duha sa parehas nga oras ug gi-inject kini sa panid, kasagaran dili kini ipahibalo sa mga teknolohiya nga makatabang.

Kinahanglan usab nimo nga ipahiangay ang roleug aria-livelebel depende sa sulud. Kung kini usa ka hinungdanon nga mensahe sama sa usa ka sayup, gamita ang role="alert" aria-live="assertive", kung dili gamita ang role="status" aria-live="polite"mga hiyas.

Samtang nagbag-o ang sulud nga imong gipakita, siguruha nga i-update ang delaytimeout aron adunay igong oras ang mga tiggamit sa pagbasa sa 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>

Kung gigamit ang autohide: false, kinahanglan nimong idugang ang usa ka close button aron tugutan ang mga tiggamit nga isalikway ang 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>

Bisan tuod sa teknikal nga paagi posible nga makadugang sa focusable/actionable controls (sama sa dugang nga mga buton o link) sa imong toast, kinahanglan nimong likayan ang pagbuhat niini para sa autohiding toasts. Bisan kung hatagan nimo ang toast ug taas nga delaytimeout , ang mga tiggamit sa keyboard ug assistive nga teknolohiya mahimong maglisud sa pagkab-ot sa toast sa oras aron molihok (tungod kay ang mga toast dili makadawat pokus kung kini gipakita). Kung kinahanglan nimo nga adunay dugang nga mga kontrol, among girekomenda ang paggamit sa usa ka toast nga adunay autohide: false.

Sass

Mga variable

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

Paggamit

Pagsugod sa mga toast pinaagi sa JavaScript:

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

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-bs-, sama sa data-bs-animation="".

Ngalan Matang Default Deskripsyon
animation boolean true Ibutang ang CSS fade transition sa toast
autohide boolean true Awtomatikong itago ang toast
delay numero 5000 Paglangan sa pagtago sa toast (ms)

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

ipakita

Nagpadayag sa toast sa usa ka elemento. Mibalik sa nagtawag sa wala pa ang toast gipakita (ie sa wala pa shown.bs.toastmahitabo ang panghitabo). Kinahanglan nimo nga mano-mano nga tawagan kini nga pamaagi, sa baylo ang imong toast dili magpakita.

toast.show()

itago

Nagtago sa toast sa usa ka elemento. Mibalik sa nanawag sa wala pa ang toast natago (ie sa wala pa hidden.bs.toastmahitabo ang panghitabo). Kinahanglan nimo nga mano-mano nga tawagan kini nga pamaagi kung gihimo nimo autohideang false.

toast.hide()

ilabay

Nagtago sa toast sa usa ka elemento. Ang imong toast magpabilin sa DOM apan dili na magpakita.

toast.dispose()

getInstance

Static nga pamaagi nga nagtugot kanimo sa pagkuha sa scrollspy nga pananglitan nga may kalabutan sa usa ka elemento sa DOM

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

getOrCreateInstance

Static nga pamaagi nga nagtugot kanimo nga makuha ang scrollspy nga pananglitan nga may kalabutan sa usa ka elemento sa DOM, o paghimo og bag-o kung wala kini gisugdan.

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

Mga panghitabo

Uri sa panghitabo Deskripsyon
show.bs.toast Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
shown.bs.toast Kini nga panghitabo gipabuto kung ang toast nahimo nga makita sa tiggamit.
hide.bs.toast Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
hidden.bs.toast Kini nga panghitabo gipabuto kung ang toast nahuman na sa pagtago gikan sa tiggamit. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})