Titositi

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.

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.

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

Xikombiso lexi hanyaka

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.

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

Hi tirhisa JavaScript leyi landzelaka ku pfuxa demo ya hina ya toast leyi hanyaka:

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

    toast.show()
  })
}

Ku vonakala loku vonakaka kahle

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

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

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

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.

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

<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 .text-bg-primaryeka .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.

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

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.

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

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

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

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.

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

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

CSS

Swilo leswi cinca-cincaka

Tanihi xiphemu xa ndlela ya Bootstrap leyi cinca-cincaka ya swilo leswi cinca-cincaka swa CSS, ti-toast sweswi ti tirhisa swilo leswi cinca-cincaka swa CSS swa laha kaya on .toastfor enhanced real-time customization. Mimpimo ya swilo leswi cinca-cincaka swa CSS yi vekiwile hi ku tirhisa Sass, kutani ku cinca ka Sass ka ha seketeriwa, na kona.

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

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:                $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);

Matirhiselo

Sungula ti- toast hi ku tirhisa JavaScript:

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

Swihlohloteri

Ku hlongoriwa ku nga fikeleriwa hi dataxihlawulekisi eka buti endzeni ka toast tanihilaha swi kombisiweke hakona laha hansi:

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

kumbe eka buti ehandle ka tositi hi ku tirhisa data-bs-targethilaha swi kombisiweke hakona laha hansi:

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

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Maendlelo

Swiendlakalo

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