Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
Check
in English

Toast

Kankhani zidziwitso kwa alendo anu ndi toast, uthenga wopepuka komanso wachenjezo wosavuta kusintha.

Patsamba ili

Ma toast ndi zidziwitso zopepuka zopangidwira kutsanzira zidziwitso zokankhira zomwe zatchuka ndi makina ogwiritsira ntchito mafoni ndi apakompyuta. Amapangidwa ndi flexbox, kotero ndi osavuta kugwirizanitsa ndi malo.

Mwachidule

Zomwe muyenera kudziwa mukamagwiritsa ntchito pulogalamu ya toast:

  • Ma toast amasankha kulowa chifukwa cha magwiridwe antchito, chifukwa chake muyenera kuwayambitsa nokha .
  • Ma toast amabisala okha ngati simunatchule autohide: false.
Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Zitsanzo

Basic

Pofuna kulimbikitsa ma toast owonjezera komanso odziwikiratu, timalimbikitsa mutu ndi thupi. Mitu ya toast imagwiritsa ntchito display: flex, kulola kusanja kosavuta kwa zomwe zili m'mphepete mwathu ndi zida za flexbox.

Ma toast amasinthasintha momwe mungafunire ndipo amakhala ndi zolembera zochepa. Pang'ono ndi pang'ono, tikufuna chinthu chimodzi kuti chikhale ndi "chowotcha" ndikulimbikitsani kuti muchotse.

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>
M'mbuyomu, zolemba zathu zidawonjezera .hidekalasiyo kuti ibise tositi (ndi display:none, osati ndi opacity:0). Izi tsopano sizikufunikanso. Komabe, kuti zigwirizane m'mbuyo, script yathu idzapitirizabe kusintha kalasi (ngakhale palibe chofunikira) mpaka mtundu wotsatira waukulu.

Chitsanzo chamoyo

Dinani batani ili pansipa kuti muwonetse chotupitsa (choyikidwa ndi zida zathu kumunsi kumanja) chomwe chabisika mwachisawawa.

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

Timagwiritsa ntchito JavaScript yotsatirayi kuti tiyambitse chiwonetsero chathu cha toast:

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

    toast.show()
  })
}

Zowoneka bwino

Ma toast amawonekera pang'ono kuti agwirizane ndi zomwe zili pansi pake.

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>

Stacking

Mukhoza kuyika toasts powakulunga mu chidebe chofufumitsa, chomwe chidzawonjezera kusiyana.

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>

Zomwe zili mwamakonda

Sinthani ma toast anu pochotsa zing'onozing'ono, kuzisintha ndi zofunikira , kapena powonjezera zolemba zanu. Apa tapanga chofufumitsa chosavuta pochotsa chokhazikika .toast-header, kuwonjezera chizindikiro chobisala chobisika kuchokera ku Zithunzi za Bootstrap , ndi kugwiritsa ntchito zida za flexbox kuti musinthe masanjidwewo.

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>

Kapenanso, mutha kuwonjezera maulamuliro owonjezera ndi zigawo ku 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>

Mitundu yamitundu

Pogwiritsa ntchito chitsanzo chomwe chili pamwambapa, mutha kupanga mitundu yosiyanasiyana yamitundu ya toast ndi utoto wathu ndi zida zakumbuyo . Apa tawonjezera .text-bg-primaryku .toast, ndikuwonjezera .btn-close-whiteku batani lathu lotseka. Kwa m'mphepete mwake, timachotsa malire okhazikika ndi .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>

Kuyika

Ikani toast ndi CSS yokhazikika momwe mukufunira. Chapamwamba kumanja nthawi zambiri amagwiritsidwa ntchito pazidziwitso, monganso chapakati chapakati. Ngati mungowonetsa chotupitsa chimodzi panthawi, ikani masitaelo oyika pa .toast.

Bootstrap Mphindi 11 zapitazo
Moni Dziko Lapansi! Uwu ndi uthenga wa 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>

Pamakina omwe amapanga zidziwitso zambiri, lingalirani kugwiritsa ntchito chinthu chokulungidwa kuti athe kusanjika mosavuta.

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>

Muthanso kukhala osangalatsa ndi zida za flexbox kuti mugwirizane ndi toast molunjika komanso/kapena molunjika.

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>

Kufikika

Ma toast amapangidwa kuti akhale zosokoneza pang'ono kwa alendo anu kapena ogwiritsa ntchito, kotero kuti muthandize omwe ali ndi zowerengera zowonera ndi matekinoloje othandizira ofanana, muyenera kukulunga ma toast anu aria-livem'dera . Zosintha m'zigawo zomwe zikuchitika (monga kubayira/kukonzanso kagawo kakang'ono ka toast) zimalengezedwa ndi owerenga zenera popanda kufunikira kusuntha malingaliro a wogwiritsa ntchito kapena kusokoneza wogwiritsa ntchito. Kuphatikiza apo, phatikizani aria-atomic="true"kuwonetsetsa kuti toast yonse imalengezedwa nthawi zonse ngati gawo limodzi (atomiki), m'malo mongolengeza zomwe zasinthidwa (zomwe zingayambitse mavuto ngati mungosintha gawo lazofufumitsa, kapena ngati mukuwonetsa zomwe zasinthidwazo. m'malo mwake). Ngati zomwe zikufunika ndi zofunika pa ndondomekoyi, mwachitsanzo pa mndandanda wa zolakwika mu fomu, ndiye gwiritsani ntchito chigawo chochenjeza.m'malo mwa toast.

Zindikirani kuti dera lomwe lilipo likuyenera kukhalapo polembapo toast isanapangidwe kapena kusinthidwa . Ngati mupanga zonse ziwiri nthawi imodzi ndikuzilowetsa patsamba, sizingalengezedwe ndi matekinoloje othandizira.

Muyeneranso kusintha rolendi aria-livemlingo malinga ndi zili. Ngati ndi uthenga wofunikira ngati cholakwika, gwiritsani ntchito role="alert" aria-live="assertive", apo ayi gwiritsani ntchito mawonekedwe role="status" aria-live="polite".

Pamene zomwe mukuwonetsa zikusintha, onetsetsani kuti mwasintha delaynthawi yomaliza kuti ogwiritsa ntchito azikhala ndi nthawi yokwanira yowerengera 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>

Mukamagwiritsa ntchito autohide: false, muyenera kuwonjezera batani lotseka kuti mulole ogwiritsa ntchito kusiya 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>

Ngakhale mwaukadaulo ndizotheka kuwonjezera zowongolera zowoneka bwino / zotheka (monga mabatani owonjezera kapena maulalo) mu toast yanu, muyenera kupewa kuchita izi pobisala toast. Ngakhale mutapatsa chofufumitsa nthawi yayitali delay, ogwiritsa ntchito kiyibodi ndi ukadaulo wothandizira angavutike kuti afikire toast munthawi yake kuti achitepo kanthu (popeza ma toast samayang'ana kwambiri akawonetsedwa). Ngati mukuyenera kukhala ndi zowongolera zina, timalimbikitsa kugwiritsa ntchito toast yokhala ndi autohide: false.

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la njira yosinthira ya CSS ya Bootstrap, ma toast tsopano amagwiritsa ntchito zosintha za CSS zakomweko .toastkuti apititse patsogolo makonda anthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Zosintha za 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);

Kugwiritsa ntchito

Yambitsani toast kudzera pa JavaScript:

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

Zoyambitsa

Kuthamangitsidwa kumatha kutheka ndi lingaliro lomwe lili datapa batani mkati mwa toast monga momwe zasonyezedwera pansipa:

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

kapena pa batani kunja kwa toast pogwiritsa ntchito data-bs-targetzomwe zili pansipa:

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

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Dzina Mtundu Zosasintha Kufotokozera
animation boolean true Ikani kusintha kwa CSS kufila ku toast.
autohide boolean true Bisani toast ikachedwa.
delay nambala 5000 Chenjerani mu ma milliseconds musanabise tositi.

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Njira Kufotokozera
dispose Imabisa tositi ya chinthu. Chotupitsa chanu chidzatsalira pa DOM koma sichidzawonekeranso.
getInstance Njira yosasunthika yomwe imakupatsani mwayi woti mugwirizane ndi chinthu cha DOM.
Mwachitsanzo: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Kubwezera chitsanzo cha Bootstrap toast.
getOrCreateInstance Njira yosasunthika yomwe imakupatsani mwayi woti mugwirizane ndi chinthu cha DOM, kapena pangani chatsopano, ngati sichinayambike.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Imabwezeranso chitsanzo cha Bootstrap toast.
hide Imabisa tositi ya chinthu. Imabwereranso kwa woyimbirayo tisanabisike (mwachitsanzo, hidden.bs.toastchochitikacho chisanachitike). Muyenera kuyimbira pamanja njira iyi ngati autohidemunapanga false.
isShown Imabwezeretsa boolean molingana ndi mawonekedwe a toast.
show Imawulula toast ya element. Imabwereranso kwa woyimba foniyo isanasonyezedwe (ie zisanachitike shown.bs.toast). Muyenera kuyimbira njira iyi pamanja, m'malo mwake chotupitsa chanu sichidzawonekera.

Zochitika

Chochitika Kufotokozera
hide.bs.toast Chochitika ichi chimachotsedwa nthawi yomweyo pamene hidenjira yachitsanzo yayitanidwa.
hidden.bs.toast Chochitikachi chimathamangitsidwa pamene tositi yatha kubisidwa kwa wogwiritsa ntchito.
show.bs.toast Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
shown.bs.toast Chochitika ichi chimathamangitsidwa pamene chofufumitsa chawonetsedwa kwa wogwiritsa ntchito. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})