Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
Check
in English

Toasts

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

I tenei wharangi

Ko nga Toasts he panui ngawari i hangaia hei whakatauira i nga panui 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:

  • Ka uru mai nga toasts mo nga take mahi, no reira me arawhiti koe maau ano .
  • 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.

html 
<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>
I mua, ka taapirihia e a maatau tuhinga te .hideakomanga ki te huna katoa i te toast (me te display:none, kaua ki te opacity:0). Kua kore tenei e tika inaianei. Heoi, mo te hototahi whakamuri, ka huri haere tonu to maatau tuhinga ki te karaehe (ahakoa karekau he hiahia) tae noa ki te putanga nui e whai ake nei.

He tauira ora

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

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>

Ka whakamahia e matou te JavaScript e whai ake nei hei whakaoho i ta maatau whakaaturanga toast ora:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Puatarangi

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

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

Tāpae

Ka taea e koe te tapae i nga toasts ma te takai ki roto i te ipu toast, ka taapiri poutū te mokowā.

html 
<div class="toast-container position-static">
  <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>

Ihirangi ritenga

Whakaritehia o toasts ma te tango i nga waahanga-iti, te takawiri ki nga taputapu , ma te taapiri ranei i a koe ake tohu. I konei kua hangahia e matou he toast ngawari ake ma te tango i te taunoa .toast-header, me te taapiri i tetahi tohu huna mai i nga Ata Bootstrap , me te whakamahi i etahi taputapu flexbox hei whakatika i te whakatakotoranga.

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

I tua atu, ka taea e koe te taapiri i etahi atu mana whakahaere me nga waahanga ki nga toasts.

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

Kaupapa tae

Ko te hanga i runga i te tauira o runga ake nei, ka taea e koe te hanga i nga momo tae toast me o maatau taputapu tae me te papamuri . I konei kua taapirihia e matou .text-bg-primaryki te .toast, katahi ka taapiri atu .btn-close-whiteki ta maatau paatene kati. Mo te tapa kirikiri, ka tangohia e matou te taitapa taunoa me te .border-0.

html 
<div class="toast align-items-center text-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>

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.

Bootstrap 11 mineti ki muri
Kia ora, te ao! He karere toast tenei.
html 
<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 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>

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

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

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.

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

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 te waahanga toast) ka panui aunoa e nga kaipanui mata me te kore e nuku i te arotahi o te kaiwhakamahi, ki te kore ranei e haukotia te kaiwhakamahi. I tua atu, whakaurua 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 ka 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-bs-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.

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

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.

CSS

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o nga huringa CSS e tipu haere ana a Bootstrap, ka whakamahia e te toasts nga taurangi CSS rohe .toastmo te whakapai ake i te waa-tui. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Taurangi Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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);

Whakamahinga

Whakaokirihia nga toast ma te JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Nga keu

Ka taea te whakakore me te datahuanga i runga i te paatene i roto i te toast pera i te whakaaturanga i raro nei:

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

i runga ranei i te patene i waho o te toast ma te whakamahi i te data-bs-targetwhakaaturanga i raro nei:

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

Kōwhiringa

I te mea ka tukuna nga whiringa ma nga huanga raraunga, JavaScript ranei, ka taea e koe te taapiri i tetahi ingoa whiringa ki data-bs-, penei i te data-bs-animation="{value}". Kia mohio koe ki te whakarereke i te momo keehi o te ingoa whiringa mai i te " CamelCase " ki te " kebab-case " ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, whakamahia data-bs-custom-class="beautifier"hei utu mo data-bs-customClass="beautifier".

Mai i te Bootstrap 5.2.0, ka tautoko nga waahanga katoa i tetahi huanga raraunga kua rahuitia hei whakamatautaudata-bs-config ka taea te whakanoho i te whirihoranga waahanga ngawari hei aho JSON. Ina he huānga data-bs-config='{"delay":0, "title":123}'me data-bs-title="456"nga huanga, ko te titleuara whakamutunga 456ko nga huanga raraunga motuhake ka takahia nga uara kua hoatu ki runga data-bs-config. I tua atu, ka taea e nga huanga raraunga o mua te whakanoho i nga uara JSON penei i te data-bs-delay='{"show":0,"hide":150}'.

Ingoa Momo Taunoa Whakaahuatanga
animation boolean true Hoatu he whakawhiti memeha CSS ki te toast.
autohide boolean true Huna aunoatia te toast i muri i te whakaroa.
delay tau 5000 Whakaroa i roto i nga manomano i mua i te huna i te toast.

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 .

Tikanga Whakaahuatanga
dispose Hunaia te toast a te huānga. Ka noho tonu to tunutunu ki te DOM engari kare e whakaatu.
getInstance Tikanga pateko e taea ai e koe te tiki i te tauira toast e hono ana ki tetahi huānga DOM.
Hei tauira: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Whakahokia he tauira toast Bootstrap.
getOrCreateInstance Tikanga pateko e taea ai e koe te tiki i te tauira toast e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou, mena kaore i arawhitia.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Whakahokia he tauira toast Bootstrap.
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.
isShown Whakahokia he boolean e ai ki te ahua o te 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.

Nga huihuinga

Takahanga Whakaahuatanga
hide.bs.toast Ka puhia tonutia tenei takahanga ina hidekua karangahia te aratuka tauira.
hidden.bs.toast Ka puhia tenei takahanga ina mutu te hunanga o te toast mai i te kaiwhakamahi.
show.bs.toast Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
shown.bs.toast Ka pupuhihia tenei takahanga i te wa i kitea ai te toast ki te kaiwhakamahi. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})