Toasts

Pana whakamohiotanga ki o manuhiri me te toast, he panui matohi ngawari me te ngawari te whakarite.

Ko nga Toasts he panui ngawari i hangaia hei whakatauira i nga whakamohiotanga pana kua rongonuihia e nga punaha whakahaere pūkoro me te papamahi. He mea hanga ki te flexbox, no reira he ngawari ki te tiro me te tuunga.

Tirohanga

Nga mea hei mohio ina whakamahi ana i te mono toast:

Mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .
Ka uru mai nga toasts mo nga take mahi, no reira me arawhiti koe maau ano .
Kia mahara kei a koe te kawenga mo te whakatakoto toasts.
Ka huna aunoa te toasts ki te kore koe e whakapūtā autohide: false.

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Tauira

Taketake

Hei whakatenatena i nga toast ka taea te whakawhanui me te matapae, ka tūtohu matou he pane me te tinana. Ka whakamahia e nga pane toast display: flex, he ngawari ki te whakatika i nga ihirangi ma te mihi ki nga taputapu tawhē me te pouaka flexbox.

He ngawari te toasts ki taau e hiahia ana, he iti noa nga tohu e hiahiatia ana. I te iti rawa, ka hiahia matou ki tetahi huānga hei whakauru i o ihirangi "tohe" me te akiaki i te paatene whakakore.

Kia ora, te ao! He karere toast tenei.

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

Ora

Patohia te paatene i raro nei hei whakaatu i te toast (kua tu me o maatau taputapu ki te kokonga matau o raro) kua hunahia e te taunoa me te .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Puatarangi

He paku marama te toasts ki te whakakotahi ki nga mea kei raro iho.

Kia ora, te ao! He karere toast tenei.

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

Tāpae

Ina he maha au toasts, ka taunoa matou ki te tapae poutū i roto i te tikanga panui.

Ka kite? Pēnei tonu.

Mahunga, ka tapae aunoa nga toasts

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

Whakanoho

Whakanohoia nga toasts me te CSS ritenga e hiahia ana koe. Ka whakamahia te taha matau o runga mo nga whakamohiotanga, pera i te waenganui o runga. Mena ka whakaatu noa koe i te toast kotahi i te wa kotahi, tuu tika nga momo tuunga ki runga i te .toast.

Kia ora, te ao! He karere toast tenei.

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

Mo nga punaha ka nui ake nga whakamohiotanga, whakaarohia te whakamahi i tetahi huānga takai kia ngawari ai te tapae.

Ka kite? Pēnei tonu.

Mahunga, ka tapae aunoa nga toasts

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

Ka taea hoki e koe te ahuareka ki nga taputapu flexbox ki te whakahāngai i te toast ki te whakapae me te poutū ranei.

Kia ora, te ao! He karere toast tenei.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

Te urunga

Ko te tikanga o te toasts he aukati iti ki o manuhiri, ki nga kaiwhakamahi ranei, no reira hei awhina i te hunga whai panui mata me nga hangarau awhina rite, me takai e koe o toasts ki tetahi aria-liverohe . Ko nga huringa ki nga rohe ora (penei i te werohia/whakahou i tetahi waahanga toast) ka panui aunoa e nga kaipanui mata me te kore e nukuhia te arotahi o te kaiwhakamahi, ki te kore ranei e haukotia te kaiwhakamahi. I tua atu, whakauru aria-atomic="true"ki te whakarite kia panuitia te katoa o te toast hei waeine kotahi (ngota), kaua ki te panui i nga mea i whakarereke (ka raru pea mena ka whakahou koe i tetahi waahanga o te ihirangi o te toast, mena kei te whakaatu i nga ihirangi toast rite tonu. i tetahi wa i muri mai). Mena he mea nui nga korero e hiahiatia ana mo te tukanga, hei tauira mo te rarangi o nga hapa i roto i te ahua, ka whakamahi i te waahanga mataarahei utu mo te tunu.

Kia mahara ko te rohe ora me noho ki roto i te tohu i mua i te whakaputanga, te whakahou ranei i te toast. Mena ka hangai koe i nga mea e rua i te wa kotahi ka werohia ki roto i te wharangi, kaore e panuitia e nga hangarau awhina.

Me urutau ano koe i te roleme te aria-livetaumata i runga i te ihirangi. Mena he karere nui penei i te hapa, whakamahia role="alert" aria-live="assertive", ki te kore whakamahi role="status" aria-live="polite"huanga.

I te mea ka huri nga korero e whakaatuhia ana e koe, me whakahōu i te delaywa mutunga kia nui te taima a nga kaiwhakamahi ki te panui i te 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>

I te wa e whakamahi ana autohide: false, me taapiri he paatene kati kia taea e nga kaiwhakamahi te whakakore i te toast.

Kia ora, te ao! He karere toast tenei.

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

Ahakoa te tikanga ka taea te taapiri i nga mana arotahi/whakamahia (penei i nga paatene taapiri, hononga hono ranei) i roto i to tunu tunu, me karo koe ki te mahi i tenei mo te toast huna aunoa. Ahakoa ka hoatu e koe he wa roa ki te toast delay, ka uaua pea nga kaiwhakamahi papapātuhi me te hangarau awhina ki te toro atu ki te toast i te wa ki te mahi (i te mea karekau e aro te toasts ina whakaatuhia ana). Mena kei a koe etahi atu mana whakahaere, ka tūtohu matou ki te whakamahi i te toast me te autohide: false.

Te whanonga JavaScript

Whakamahinga

Whakaokirihia nga toast ma te JavaScript:

$('.toast').toast(option)

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Ingoa	Momo	Taunoa	Whakaahuatanga
hākoritanga	boolean	pono	Hoatu he whakawhiti memeha CSS ki te toast
huna aunoa	boolean	pono	Huna aunoa i te toast
whakaroa	tau	`500`	Whakaroa te huna i te toast (ms)

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

`$().toast(options)`

Ka hono i te kaikawe toast ki tetahi kohinga huānga.

`.toast('show')`

He whakaatu i te toast a te huānga. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te toast (arā i mua i te shown.bs.toastputa o te takahanga). Me waea a ringa koe ki tenei tikanga, engari kare to tunu e whakaatu.

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

`.toast('hide')`

Hunaia te toast a te huānga. Ka hoki ki te kaiwaea i mua i te hunanga o te toast (arā i mua i te hidden.bs.toastputa o te takahanga). Me waea atu koe ki tenei tikanga mena ka mahia e autohidekoe false.

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

`.toast('dispose')`

Hunaia te toast a te huānga. Ka noho tonu to tunutunu ki te DOM engari kare e whakaatu.

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

Nga huihuinga

Momo Takahanga	Whakaahuatanga
show.bs.toast	Ka pupuhi tenei takahanga ina ka `show`karangahia te aratuka tauira.
whakaaturia.bs.toast	Ka pupuhihia tenei takahanga i te wa e kitea ai te toast ki te kaiwhakamahi.
huna.bs.toast	Ka puhia tonutia tenei takahanga ina `hide`kua karangahia te aratuka tauira.
huna.bs.toast	Ka puhia tenei takahanga ina mutu te hunanga o te toast mai i te kaiwhakamahi.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})