Source

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.

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:

  • Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .
  • Ang mga toast gi-opt-in tungod sa mga hinungdan sa performance, mao nga ikaw mismo ang mag-initialize niini .
  • Palihug timan-i nga ikaw ang responsable sa pagpahimutang sa mga toast.
  • 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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translucent

Ang mga toast gamay usab nga translucent, mao nga kini nagsagol sa bisan unsa nga makita niini. Para sa mga browser nga nagsuporta sa backdrop-filterCSS property, sulayan usab namo nga i-blur ang mga elemento ubos sa toast.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Pagtapok

Kung adunay ka daghang mga toast, default namon ang pag-stack niini nga patayo sa usa ka mabasa nga paagi.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

Mahimo ka usab madani sa mga gamit sa flexbox aron ipahiangay 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" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 single (atomic) nga yunit, imbes nga ipahibalo kung unsa ang giusab (nga mahimong mosangpot sa mga problema kon imong i-update lamang ang bahin sa sulod sa toast, o kung ipakita ang sama nga sulod sa toast sa 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 masiguro nga adunay igong oras ang mga tawo sa pagbasa sa toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Kung gamiton 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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Panggawi sa JavaScript

Paggamit

Pagsugod sa mga toast pinaagi sa JavaScript:

$('.toast').toast(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-, sama sa data-animation="".

Ngalan Matang Default Deskripsyon
animation boolean tinuod Ibutang ang CSS fade transition sa toast
autotago boolean tinuod Awtomatikong itago ang toast
paglangan numero 500 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 .

$().toast(options)

Naglakip sa tigdumala sa toast sa usa ka koleksyon sa elemento.

.toast('show')

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.

$('#element').toast('show')

.toast('hide')

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.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

Mga panghitabo

Uri sa Hitabo Deskripsyon
show.bs.toast Kini nga panghitabo nagdilaab dayon kung ang showpamaagi sa pananglitan gitawag.
gipakita.bs.toast Kini nga panghitabo gipabuto kung ang toast nahimo nga makita sa tiggamit.
itago.bs.toast Kini nga panghitabo gipabuto dayon kung ang hidepamaagi sa pananglitan gitawag na.
tinago.bs.toast Kini nga panghitabo gipabuto kung ang toast nahuman na sa pagtago gikan sa tiggamit. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})