Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Toasts

Shiriki arifa kwa wageni wako na toast, ujumbe wa tahadhari unaoweza kubinafsishwa kwa urahisi.

Katika ukurasa huu

Toasts ni arifa nyepesi zilizoundwa kuiga arifa zinazotumwa na programu hata wakati huitumii ambazo zimeenezwa na mifumo ya uendeshaji ya simu na kompyuta ya mezani. Zimeundwa kwa flexbox, kwa hivyo ni rahisi kupangilia na kuziweka.

Muhtasari

Mambo ya kujua unapotumia programu-jalizi ya toast:

  • Toasts ni kuchagua kuingia kwa sababu za utendaji, kwa hivyo ni lazima uzianzishe wewe mwenyewe .
  • Toasts zitajificha kiotomatiki ikiwa hutabainisha autohide: false.
Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Mifano

Msingi

Ili kuhimiza toasts kupanuliwa na kutabirika, tunapendekeza kichwa na mwili. Vijajuu vya toast hutumia display: flex, kuruhusu upangaji rahisi wa maudhui kutokana na ukingo wetu na huduma za flexbox.

Toasts ni rahisi kama unavyohitaji na zina alama ndogo sana zinazohitajika. Kwa uchache, tunahitaji kipengele kimoja ili kuwa na maudhui yako "yaliyochapwa" na kuhimiza kwa nguvu kitufe cha kukataa.

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>
Hapo awali, maandishi yetu yaliongeza .hidedarasa kwa nguvu ili kuficha toast kabisa (na display:none, badala ya na opacity:0). Hii sasa sio lazima tena. Walakini, kwa utangamano wa nyuma, hati yetu itaendelea kugeuza darasa (ingawa hakuna hitaji la vitendo) hadi toleo kuu linalofuata.

Mfano hai

Bofya kitufe kilicho hapa chini ili kuonyesha toast (iliyowekwa pamoja na huduma zetu kwenye kona ya chini kulia) ambayo imefichwa kwa chaguo-msingi.

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

Tunatumia JavaScript ifuatayo ili kuanzisha onyesho letu la toast moja kwa moja:

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

    toast.show()
  })
}

Uwazi

Toasts hung'aa kidogo ili kuchanganyika na kile kilicho chini yao.

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>

Kuweka mrundikano

Unaweza kuweka toasts kwa kuifunga kwenye chombo cha toast, ambacho kitaongeza nafasi kwa wima.

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>

Maudhui maalum

Geuza toast zako kukufaa kwa kuondoa vijenzi vidogo, kuvirekebisha na huduma , au kwa kuongeza alama zako mwenyewe. Hapa tumeunda toast rahisi zaidi kwa kuondoa chaguo-msingi .toast-header, kuongeza ikoni maalum ya kujificha kutoka kwa Aikoni za Bootstrap , na kutumia baadhi ya huduma za flexbox kurekebisha mpangilio.

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>

Vinginevyo, unaweza pia kuongeza vidhibiti vya ziada na vipengele kwa 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>

Mipango ya rangi

Kwa kuzingatia mfano hapo juu, unaweza kuunda mipango tofauti ya rangi ya toast na huduma zetu za rangi na mandharinyuma . Hapa tumeongeza .text-bg-primarykwa .toast, na kisha tukaongeza .btn-close-whitekwa kitufe chetu cha kufunga. Kwa ukingo mkali, tunaondoa mpaka chaguo-msingi na .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>

Uwekaji

Weka toasts kwa kutumia CSS maalum unavyohitaji. Sehemu ya juu kulia mara nyingi hutumiwa kwa arifa, kama ilivyo sehemu ya juu ya kati. Iwapo utawahi tu kuonyesha toast moja kwa wakati mmoja, weka mitindo ya kuweka kwenye .toast.

Bootstrap Dakika 11 zilizopita
Salamu, Dunia! Huu ni ujumbe toast.
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>

Kwa mifumo inayozalisha arifa zaidi, zingatia kutumia kipengee cha kufunga ili ziweze kupangwa kwa urahisi.

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>

Unaweza pia kupendezwa na huduma za flexbox ili kupanga toasts mlalo na/au wima.

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>

Ufikivu

Toast inakusudiwa kuwa usumbufu mdogo kwa wageni au watumiaji wako, kwa hivyo ili kuwasaidia wale walio na visoma skrini na teknolojia sawa za usaidizi, unapaswa kukunja toast zako katika aria-liveeneo . Mabadiliko kwenye maeneo ya moja kwa moja (kama vile kuingiza/kusasisha kijenzi cha toast) hutangazwa kiotomatiki na visoma skrini bila kuhitaji kusogeza lengo la mtumiaji au kumkatiza mtumiaji vinginevyo. Zaidi ya hayo, jumuisha aria-atomic="true"kuhakikisha kuwa toast nzima inatangazwa kila wakati kama kitengo kimoja (atomiki), badala ya kutangaza tu kile kilichobadilishwa (jambo ambalo linaweza kusababisha matatizo ikiwa utasasisha tu sehemu ya maudhui ya toast, au ikiwa inaonyesha maudhui sawa ya toast. wakati wa baadaye). Ikiwa taarifa inayohitajika ni muhimu kwa mchakato, kwa mfano kwa orodha ya makosa katika fomu, basi tumia kipengele cha tahadhari .badala ya toast.

Kumbuka kuwa eneo la moja kwa moja linahitaji kuwepo katika ghafi kabla ya toast kuzalishwa au kusasishwa. Ukitengeneza zote mbili kwa wakati mmoja na kuziingiza kwenye ukurasa, kwa ujumla hazitatangazwa na teknolojia saidizi.

Pia unahitaji kurekebisha rolena aria-livekiwango kulingana na yaliyomo. Ikiwa ni ujumbe muhimu kama hitilafu, tumia role="alert" aria-live="assertive", vinginevyo tumia role="status" aria-live="polite"sifa.

Kadiri maudhui unayoonyesha yanavyobadilika, hakikisha kwamba umesasisha muda wa delaykuisha ili watumiaji wapate muda wa kutosha wa kusoma 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>

Unapotumia autohide: false, lazima uongeze kitufe cha kufunga ili kuruhusu watumiaji kuondoa 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>

Ingawa kitaalamu inawezekana kuongeza vidhibiti vinavyoweza kuangaziwa/kutekelezeka (kama vile vitufe au viungo vya ziada) kwenye toast yako, unapaswa kuepuka kufanya hivi kwa kuficha toast kiotomatiki. Hata ukitoa toast muda mrefu delaykuisha , watumiaji wa kibodi na teknolojia ya usaidizi wanaweza kupata ugumu wa kufikia toast kwa wakati ili kuchukua hatua (kwa kuwa toasts hazizingatiwi zinapoonyeshwa). Ikiwa lazima uwe na vidhibiti zaidi, tunapendekeza utumie toast na autohide: false.

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, toasts sasa hutumia viwezo vya ndani vya CSS .toastili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

  --#{$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};

Vigezo vya 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);

Matumizi

Anzisha toasts kupitia JavaScript:

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

Vichochezi

Kuachishwa kunaweza kupatikana kwa datasifa kwenye kitufe ndani ya toast kama inavyoonyeshwa hapa chini:

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

au kwenye kitufe nje ya toast kwa kutumia data-bs-targetkama inavyoonyeshwa hapa chini:

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

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Jina Aina Chaguomsingi Maelezo
animation boolean true Tumia mpito wa kufifia kwa CSS kwenye toast.
autohide boolean true Ficha toast kiotomatiki baada ya kuchelewa.
delay nambari 5000 Subiri kwa milisekunde kabla ya kuficha toast.

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

Njia Maelezo
dispose Huficha toast ya kipengele. Toast yako itasalia kwenye DOM lakini haitaonekana tena.
getInstance Njia tuli ambayo hukuruhusu kupata mfano wa toast unaohusishwa na kipengee cha DOM.
Kwa mfano: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Hurejesha mfano wa toast ya Bootstrap.
getOrCreateInstance Njia tuli ambayo hukuruhusu kupata mfano wa toast unaohusishwa na kipengee cha DOM, au kuunda mpya, ikiwa haikuanzishwa.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Hurejesha mfano wa toast ya Bootstrap.
hide Huficha toast ya kipengele. Hurejesha kwa mpigaji simu kabla toast haijafichwa (yaani kabla ya hidden.bs.toasttukio kutokea). Lazima upigie simu njia hii mwenyewe ikiwa ulifanya autohide.false
isShown Hurejesha boolean kulingana na hali ya mwonekano wa toast.
show Huonyesha toast ya kipengele. Hurejesha kwa mpigaji simu kabla toast haijaonyeshwa (yaani kabla ya shown.bs.toasttukio kutokea). Utalazimika kupiga simu kwa njia hii mwenyewe, badala yake toast yako haitaonekana.

Matukio

Tukio Maelezo
hide.bs.toast Tukio hili linafutwa mara moja wakati hidenjia ya mfano imeitwa.
hidden.bs.toast Tukio hili huwashwa wakati toast imekamilika kufichwa kutoka kwa mtumiaji.
show.bs.toast Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
shown.bs.toast Tukio hili huwashwa wakati toast imefanywa kuonekana kwa mtumiaji. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})