Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
in English

Tostlar

Tost, ýeňil we aňsat düzülip bilinýän duýduryş habary bilen gelýänleriňize bildirişleri basyň.

Bu sahypada

Tostlar, ykjam we iş stoly operasiýa ulgamlary tarapyndan meşhur bolan itek habarnamalaryny meňzeş etmek üçin döredilen ýeňil bildirişlerdir. Flexbox bilen gurlan, şonuň üçin deňleşdirmek we ýerleşdirmek aňsat.

Gysgaça syn

Tost plaginini ulananyňyzda bilmeli zatlar:

  • Tostlar öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
  • Tostlar görkezmeseňiz awtomatiki usulda gizlener autohide: false.
Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Mysallar

Esasy

Giňeldilip bilinýän we öňünden aýdyp boljak tostlary höweslendirmek üçin sözbaşy we göwre maslahat berýäris. Tost sözbaşylary display: flex, margin we flexbox kömekçi enjamlarymyzyň kömegi bilen mazmuny aňsatlaşdyrmaga mümkinçilik berýär.

Tostlar zerur bolşy ýaly çeýe we zerur bellik az. Iň bolmanda, “tostlanan” mazmunyňyzy saklamak we işden çykarmak düwmesini güýçli höweslendirmek üçin ýekeje element talap edýäris.

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>
Ozal ýazgylarymyz .hidetosty doly gizlemek üçin ( display:nonediňe däl-de, eýsem opacity:0) synpy dinamiki taýdan goşýardy. Indi bu zerur däl. Şeýle-de bolsa, yza gabat gelmek üçin skriptimiz indiki esasy wersiýa çenli synpy üýtgetmäge dowam eder (munuň üçin amaly zerurlyk bolmasa-da).

Göni mysal

Dymmaklyk bilen gizlenen tosty görkezmek üçin aşakdaky düwmä basyň.

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

Göni tost görkezişimizi başlamak üçin aşakdaky JavaScript ulanýarys:

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

    toast.show()
  })
}

Düşünjeli

Tostlar, aşaky zatlar bilen garyşmak üçin birneme düşnüklidir.

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>

Ackygyndy

Tostlary tost gabyna salyp, dikligine birneme aralyk goşup bilersiňiz.

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>

Omörite mazmun

Bölek bölekleri aýyrmak, kommunal hyzmatlar bilen üýtgetmek ýa-da öz belligiňizi goşmak bilen tostlaryňyzy sazlaň. Bu ýerde deslapky aýyryp, Bootstrap nyşanlaryndan.toast-header ýörite gizlin nyşany goşup we tertibi sazlamak üçin käbir flexbox kömekçi enjamlaryny ulanyp has ýönekeý tost döretdik .

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>

.A-da bolmasa, tostlara goşmaça dolandyryş we komponentler goşup bilersiňiz.

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>

Reňk shemalary

Aboveokardaky mysaldan ugur alyp, reňkimiz we fon hyzmatlarymyz bilen dürli tost reňk shemalaryny döredip bilersiňiz. Bu ýerde biz goşduk .text-bg-primary, .toastsoň bolsa .btn-close-whiteýakyn düwmämize goşduk. Gysga gyrasy üçin, adaty araçägi aýyrýarys .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>

Acementerleşiş

Gerekli CSS bilen tostlary ýerleşdiriň. Rightokarky sag ýokarky ýokarky ýaly köplenç habarnamalar üçin ulanylýar. Bir gezekde diňe bir tost görkezjek bolsaňyz, ýerleşiş stillerini sag tarapda goýuň .toast.

Bootstrap 11 minut öň
Salam, dünýä! Bu tost habary.
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>

Has köp habarnamalary döredýän ulgamlar üçin, aňsatlyk bilen ýapyşyp bilmekleri üçin, gaplama elementini ulanmagy göz öňünde tutuň.

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>

Şeýle hem, tostlary keseligine we / ýa-da dikligine deňlemek üçin flexbox kömekçi enjamlary bilen gyzyklanyp bilersiňiz.

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>

Elýeterlilik

Tostlar, gelýänleriňize ýa-da ulanyjylaryňyza ownuk bökdençlikler üçin niýetlenendir, şonuň üçin ekran okyjylary we şuňa meňzeş kömekçi tehnologiýalary bolanlara kömek etmek üçin tostlaryňyzy bir aria-livesebite ýapmaly . Janly sebitlerdäki üýtgeşmeler (meselem, tost komponentine sanjym / täzelenmek ýaly) ulanyjynyň ünsüni üýtgetmek ýa-da ulanyjyny başga birine päsgel bermek zerurlygy bolmazdan, awtomatiki usulda ekran okyjylary tarapyndan yglan edilýär. Mundan başga- da, aria-atomic="true"üýtgedilen zady yglan etmek däl-de, tostuň mazmunynyň diňe bir bölegini täzeleseňiz ýa-da şol bir tost mazmunyny görkezseňiz, tutuş tostuň hemişe bir (atom) birligi hökmünde yglan edilmegini üpjün ediň. soňraky nokatda). Zerur maglumatlar amal üçin möhüm bolsa, mysal üçin bir görnüşdäki ýalňyşlyklaryň sanawy üçin, duýduryş komponentini ulanyňtost ýerine.

Tost döredilmezden ýa-da täzelenmezden ozal janly sebitiň bellikde bolmalydygyny unutmaň . Şol bir wagtyň özünde ikisini hem dinamiki görnüşde döredip, sahypa salsaňyz, köplenç kömekçi tehnologiýalar tarapyndan yglan edilmez.

Şeýle hem mazmuna baglylykda derejäni rolewe derejäni uýgunlaşdyrmaly . aria-liveErroralňyşlyk ýaly möhüm habar bolsa, ulanyň role="alert" aria-live="assertive", bolmasa role="status" aria-live="polite"atributlary ulanyň.

Görkezýän mazmunyňyzyň üýtgemegi bilen, ulanyjylaryň tosty okamak üçin ýeterlik wagty bolar ýaly , delaywagty gutarmagy unutmaň.

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

Ulanylanda autohide: false, ulanyjylara tostdan ýüz öwürmek üçin ýakyn düwme goşmaly.

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>

Tehniki taýdan tostuňyza ünsi jemläp boljak / hereket edip bolýan dolandyryşlary (goşmaça düwmeler ýa-da baglanyşyklar) goşmak mümkin bolsa-da, tostlary awtomatiki gizlemek üçin muny etmeli däl. delayTosta uzak wagt berseňizem , klawiatura we kömekçi tehnologiýa ulanyjylary herekete geçmek üçin tosta wagtynda ýetmegi kynlaşdyryp bilerler (sebäbi tostlar görkezilende ünsi almaýar). Mundan başga-da gözegçilik etmeli bolsaňyz, tost ulanmagy maslahat berýäris autohide: false.

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, tostlar .toasthakyky wagtlaýyn özleşdirmek üçin ýerli CSS üýtgeýjileri ulanýarlar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

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

Ulanylyşy

JavaScript arkaly tostlary başlaň:

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

Triggerler

Aşakda görkezilişi ýaly tostuň içindäki düwmedäkidata atribut bilen işden aýrylyp bilner :

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

ýa-da aşakda görkezilişi ýaly tostuň daşyndaky düwmede :data-bs-target

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady Görnüşi Bellenen Düşündiriş
animation boolean true Tosta CSS solgun geçişini ulanyň.
autohide boolean true Gijikdirilenden soň tosty awtomatiki gizläň.
delay sany 5000 Tosty gizlemezden ozal millisekuntda gijä galmak.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Usul Düşündiriş
dispose Bir elementiň tostyny ​​gizleýär. Tostyňyz DOM-da galar, ýöne indi görkezmez.
getInstance DOM elementi bilen baglanyşykly tost mysalyny almaga mümkinçilik berýän statiki usul.
Mysal üçin: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)“Bootstrap” tost mysalyny görkezýär.
getOrCreateInstance DOM elementi bilen baglanyşykly tost mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)“Bootstrap” tost mysalyny görkezýär.
hide Bir elementiň tostyny ​​gizleýär. Tost hakykatdanam gizlenmänkä (ýagny waka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär . hidden.bs.toastBu usuly el bilen autohideçagyrmaly false.
isShown Tostuň görüniş ýagdaýyna görä bir bulany görkezýär.
show Bir elementiň tostyny ​​açýar. Tost görkezilmänkä (ýagny shown.bs.toastwaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär. Bu usuly el bilen çagyrmaly, ýerine tostyňyz görkezilmez.

Wakalar

Waka Düşündiriş
hide.bs.toast Bu waka hidemysal usuly çagyrylanda derrew atylýar.
hidden.bs.toast Bu waka tost ulanyjydan gizlenenden soň atylýar.
show.bs.toast showBu waka mysal usuly çagyrylanda derrew ýanýar .
shown.bs.toast Bu waka tost ulanyja görünen mahaly atylýar. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})