Source

Tostlar

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

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:

  • JavaScriptimizi çeşmeden gurýan bolsaňyz, talap edýärutil.js .
  • Tostlar öndürijilik sebäplerine görä saýlanýar, şonuň üçin olary özüňiz başlamaly .
  • Tostlary ýerleşdirmek üçin jogapkärdigiňizi ýadyňyzdan çykarmaň.
  • 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ňsat deňleşdirmäge 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.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Düşünjeli

Tostlar hem birneme düşnükli, şonuň üçin näme görünse-de garyşýarlar. CSS häsiýetini goldaýan brauzerler üçin backdrop-filter, tostuň aşagyndaky elementleri bulaşdyrmaga synanyşarys.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Ackygyndy

Birnäçe tostyňyz bar bolsa, olary okalýan görnüşde dikligine ýerleşdirýäris.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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ň.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 etmegiň ýerine (tostyň 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ň. wagtyň has soňky nokady). Gerekli 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, adamlaryň tosty okamak üçin ýeterlik wagtynyň bardygyny üpjün etmek üçin wagt delaygutarmagyny unutmaň.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-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.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript häsiýeti

Ulanylyşy

JavaScript arkaly tostlary başlaň:

$('.toast').toast(option)

Görnüş

Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-animation="".

Ady Görnüşi Bellenen Düşündiriş
animasiýa boolean dogry Tosta CSS solgun geçişini ulanyň
awtohide boolean dogry Tosty awtomatik gizläň
gijikdirmek sany 500 Tosty gizlemek (ms)

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

$().toast(options)

Bir element ýygyndysyna tost işleýjisini dakýar.

.toast('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.

$('#element').toast('show')

.toast('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.

$('#element').toast('hide')

.toast('dispose')

Bir elementiň tostyny ​​gizleýär. Tostyňyz DOM-da galar, ýöne indi görkezmez.

$('#element').toast('dispose')

Wakalar

Çäräniň görnüşi Düşündiriş
show.bs.toast showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezilen.bs.toast Bu waka tost ulanyja görünen mahaly atylýar.
hide.bs.toast Bu waka hidemysal usuly çagyrylanda derrew atylýar.
gizlenen.bs.toast Bu waka tost ulanyjydan gizlenenden soň atylýar. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})