Titositi

Susa switiviso eka vaendzi va wena hi tositi, rungula ra xitsundzuxo leri olovaka ni leri nga cinciwaka hi ku olova.

Eka tluka leri

Ti- toast i switiviso swo olova leswi endleriweke ku tekelela switiviso swo susumeta leswi dumeke hi tisisiteme to tirha ta tiselfoni ni ta le desktop. Ti akiwile hi flexbox, kutani swa olova ku ti ringanisa na ku ti veka.

Nkatsakanyo

Swilo leswi u faneleke u swi tiva loko u tirhisa plugin ya toast:

Ti- toast i ti-opt-in hikwalaho ka swivangelo swa matirhelo, hikwalaho u fanele u ti sungula hi wexe .
Ti toast ti ta tifihla hi toxe loko u nga boxi autohide: false.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Swikombiso

Ntolovelo

Ku khutaza ti toast leti andlariwaka na leti nga languteriwaka, hi ringanyeta nhloko na miri. Toast headers use display: flex, ku pfumelela ku olova ka ku ringanisa ka swilo leswi nga endzeni hikwalaho ka switirhisiwa swa hina swa margin na flexbox.

Ti toasts ti olova hilaha u lavaka hakona naswona tina markup yitsongo swinene leyi lavekaka. Eka mpimo wa le hansi, hi lava elemente yin’we ku va na nhundzu ya wena leyi “tosiweke” naswona hi khutaza swinene buti yo hlongola.

Xewani, misava! Leri i rungula ra toast.

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

Hanya

Click button leyi nga laha hansi ku kombisa toast (yi vekiwile na switirhisiwa swa hina ekhonweni ya le hansi ya xinene) leyi fihliweke hi ku tiyimisela hi .hide.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

Ku vonakala loku vonakaka kahle

Ti toasts tina translucent nyana kuva ti hlangana na leswinga ehansi ka tona.

Xewani, misava! Leri i rungula ra toast.

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

Ku hlanganisiwa ka swilo

U nga ha hlanganisa ti- toast hi ku ti phutsela eka xigwitsirisi xa toast, leswi nga ta engetela ku hambana ko karhi hi ku kongoma.

Vona? Ku fana na leswi ntsena.

Tinhloko ti tlakukile, ti toast ti ta stack hi toxe

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

Swilo leswi nga endzeni ka ntolovelo

Endla leswaku ti- toast ta wena ti va leti u ti lavaka hi ku susa swiphemu leswitsongo, u swi tweaking hi switirhisiwa , kumbe hi ku engetela markup ya wena. Laha hi endle toast yo olova hi ku susa default .toast-header, hi engetela xifaniso xa ku fihla xa ntolovelo ku suka eka Bootstrap Icons , na ku tirhisa switirhisiwa swin’wana swa flexbox ku lulamisa layout.

Xewani, misava! Leri i rungula ra toast.

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

Handle ka sweswo, u nga ha tlhela u engetela swilawuri leswi engetelekeke ni swiphemu eka ti- toast.

Xewani, misava! Leri i rungula ra toast.

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

Swikimi swa mihlovo

Hi ku aka eka xikombiso lexi nga laha henhla, u nga endla swikimi swo hambana swa mihlovo ya toast hi switirhisiwa swa hina swa mihlovo na swa le ndzhaku . Laha hi engeterile .bg-primaryna .text-whiteeka .toast, ivi hi engetela .btn-close-whiteeka buti ya hina yo pfala. Ku kuma tlhelo ro tsindziyela, hi susa ndzilakano wa xiviri hi .border-0.

Xewani, misava! Leri i rungula ra toast.

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

Ku vekiwa ka swilo

Veka ti toasts hi custom CSS tani hi leswi u swi lavaka. Le henhla exineneni hakanyingi ku tirhisiwa switiviso, ku fana ni le henhla exikarhi. Loko u ta tshama u kombisa tositi yin’we ntsena hi nkarhi, veka switayele swo veka swilo kunene eka .toast.

Xewani, misava! Leri i rungula ra toast.

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

Eka tisisiteme leti humesaka switiviso swo tala, anakanya hi ku tirhisa elemente yo phutsela leswaku ti ta kota ku hlanganisa hi ku olova.

Vona? Ku fana na leswi ntsena.

Tinhloko ti tlakukile, ti toast ti ta stack hi toxe

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

U nga ha tlhela u kuma fancy hi switirhisiwa swa flexbox ku ringanisa ti toasts hi ndlela yo olova na/kumbe hi ndlela yo olova.

Xewani, misava! Leri i rungula ra toast.

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

Ku fikelela

Ti- toast ti endleriwe ku va swilo leswitsongo leswi kavanyetaka vaendzi kumbe vatirhisi va wena, hikwalaho leswaku u pfuna lava nga ni swihlaya-swikirini ni thekinoloji leyi fanaka leyi pfunaka, u fanele u phutsela ti- toast ta wena aria-liveexifundzheni xo karhi . Ku cinca eka swifundzha leswi hanyaka (ku fana na ku chela/pfuxeta xiphemu xa toast) swi tivisiwa hi ku tisungulela hi vahlayi va xikirini handle ko lava ku fambisa nhlokomhaka ya mutirhisi kumbe hi ndlela yin’wana ku kavanyeta mutirhisi. Ku engetela kwalaho, katsa aria-atomic="true"ku tiyisisa leswaku tositi hinkwayo yi tshama yi ri karhi yi tivisiwa tanihi yuniti yin’we (ya athomo), ematshan’weni yo tivisa ntsena leswi cinciweke (leswi nga vangaka swiphiqo loko u pfuxeta ntsena xiphemu xa leswi nga endzeni ka tositi, kumbe loko u kombisa swilo leswi fanaka swa tositi eka nkarhi wa le ndzhaku). Loko mahungu lama lavekaka ya ri ya nkoka eka phurosese, xikombiso eka nxaxamelo wa swihoxo eka fomo, kutani tirhisa xiphemu xa xitsundzuxoematshan’weni ya toast.

Xiya leswaku ndzhawu leyi hanyaka yifanele kuva kona eka markup loko toast yinga se endliwa kumbe ku pfuxetiwa. Loko u tumbuluxa hi ndlela leyi cinca-cincaka havumbirhi bya swona hi nkarhi wun’we ivi u swi nghenisa eka tluka, hi ntolovelo a swi nge tivisiwi hi thekinoloji yo pfuneta.

U fanele ku tlhela u cinca-cinca rolena aria-livelevel ku ya hi leswi nga endzeni. Loko ku ri rungula ra nkoka ku fana na xihoxo, tirhisa role="alert" aria-live="assertive", handle ka sweswo tirhisa role="status" aria-live="polite"swihlawulekisi.

Loko swilo leswi u swi kombisaka swi ri karhi swi cinca, tiyiseka leswaku u pfuxeta nkarhi lowu delayheleke leswaku vatirhisi va va ni nkarhi lowu eneleke wo hlaya tositi.

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

Loko u tirhisa autohide: false, u fanele u engetela buti yo pfala leswaku u pfumelela vatirhisi ku hlongola tositi.

Xewani, misava! Leri i rungula ra toast.

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

Loko hi tlhelo ra xithekiniki swinga koteka ku engetela vulawuri lebyi kongomisaka/leswi nga endliwaka (kufana na ti buttons to engetela kumbe swihlanganisi) eka toast ya wena, ufanele ku papalata ku endla leswi eka ti autohiding toasts. Even if you give the toast a long delaytimeout , vatirhisi va khibhodi ni thekinoloji yo pfuneta va nga ha kuma swi tika ku fikelela toast hi nkarhi leswaku va teka goza (tanihi leswi ti- toast ti nga kumiki ku kongomisa loko ti kombisiwa). Loko hi ku helela u fanele u va ni vulawuri byin’wana, hi ringanyeta ku tirhisa tositi leyi nga ni autohide: false.

Sass

Swilo leswi cinca-cincaka

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

Matirhiselo

Sungula ti- toast hi ku tirhisa JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-animation="".

Vito	Muxaka	Ku tlula	Nhlamuselo
`animation`	xitsonga xitsonga	`true`	Tirhisa ku cinca ka CSS fade eka toast
`autohide`	xitsonga xitsonga	`true`	Auto tumbeta toast
`delay`	nomboro	`5000`	Ku hlwela ku tumbeta toast (ms) .

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

kombisa

Ku paluxa toast ya elemente. Ku tlhelela eka mufoyini loko tositi yi nga si kombisiwa hakunene (i.e. loko shown.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko, ematshan’wini ya sweswo toast ya wena a yi nge kombisi.

toast.show()

tumbela

Ku tumbeta toast ya elemente. Ku tlhelela eka mufoyini loko toast yi nga si fihliwa hakunene (i.e. loko hidden.bs.toastxiendlakalo xi nga si humelela). U fanele ku vitana ndlela leyi hi voko loko u endle autohideku false.

toast.hide()

lahla

Ku tumbeta toast ya elemente. Toast ya wena yi ta tshama yi ri eka DOM kambe a yi nge he kombisi.

toast.dispose()

getXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

kumaKumbeEndlaXikombiso

Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa scrollspy lexi fambelanaka na elemente ya DOM, kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Swiendlakalo

Muxaka wa xiendlakalo	Nhlamuselo
`show.bs.toast`	Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku `show`vitaniwa ndlela ya xikombiso.
`shown.bs.toast`	Xiendlakalo lexi xi hisiwa loko toast yi endliwile yi vonaka eka mutirhisi.
`hide.bs.toast`	Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko ndlela ya `hide`xikombiso yi vitaniwile.
`hidden.bs.toast`	Xiendlakalo lexi xi duvuriwa loko tositi yi hetile ku tumbetiwa eka mutirhisi.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})