Source

Dollitë

Shtypni njoftimet për vizitorët tuaj me një dolli, një mesazh alarmi të lehtë dhe lehtësisht të personalizueshëm.

Dollitë janë njoftime të lehta të krijuara për të imituar njoftimet shtytëse që janë popullarizuar nga sistemet operative celulare dhe desktop. Ato janë ndërtuar me flexbox, kështu që ato janë të lehta për t'u lidhur dhe pozicionuar.

Vështrim i përgjithshëm

Gjërat që duhet të dini kur përdorni shtojcën e dolli:

  • Nëse po ndërtoni JavaScript-in tonë nga burimi, ai kërkonutil.js .
  • Dollitë janë të zgjedhura për arsye të performancës, ndaj duhet t'i inicializoni vetë .
  • Ju lutemi vini re se ju jeni përgjegjës për pozicionimin e dollive.
  • Dollitë do të fshihen automatikisht nëse nuk e specifikoni autohide: false.

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

Shembuj

bazë

Për të inkurajuar dolli të zgjatura dhe të parashikueshme, ne rekomandojmë një kokë dhe një trup. Përdorimi i titujve të dolli display: flex, duke lejuar përafrimin e lehtë të përmbajtjes falë shërbimeve tona të marzhit dhe flexbox.

Dollitë janë aq fleksibël sa ju nevojitet dhe kanë shumë pak markup të kërkuar. Së paku, ne kërkojmë që një element i vetëm të përmbajë përmbajtjen tuaj "të thekur" dhe të inkurajojmë fuqimisht një buton heqjeje.

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

E tejdukshme

Dollitë janë gjithashtu pak të tejdukshme, kështu që ato përzihen mbi çdo gjë që mund të duken. Për shfletuesit që mbështesin backdrop-filtervetinë CSS, ne do të përpiqemi gjithashtu të turbullojmë elementët nën një dolli.

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

Stacking

Kur keni shumë dolli, ne si parazgjedhje i vendosim ato vertikalisht në një mënyrë të lexueshme.

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

Vendosja

Vendosni dolli me CSS të personalizuar sipas nevojës. Pjesa e sipërme djathtas përdoret shpesh për njoftime, siç është pjesa e sipërme e mesme. Nëse do të tregoni ndonjëherë vetëm një dolli në të njëjtën kohë, vendosni stilet e pozicionimit drejt në .toast.

Bootstrap 11 minuta më parë
Përshendetje Botë! Ky është një mesazh dolli. 
<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>

Për sistemet që gjenerojnë më shumë njoftime, merrni parasysh përdorimin e një elementi mbështjellës në mënyrë që të mund të grumbullohen lehtësisht.

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

Ju gjithashtu mund të shijoni shërbimet e flexbox për të vendosur dollitë horizontalisht dhe/ose vertikalisht.

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

Aksesueshmëria

Dollitë synohen të jenë ndërprerje të vogla për vizitorët ose përdoruesit tuaj, kështu që për të ndihmuar ata që kanë lexues ekrani dhe teknologji të ngjashme ndihmëse, duhet t'i mbështillni dollitë tuaja në një aria-liverajon . Ndryshimet në rajonet e drejtpërdrejta (të tilla si injektimi/përditësimi i një komponenti dolli) njoftohen automatikisht nga lexuesit e ekranit pa pasur nevojë të zhvendosin fokusin e përdoruesit ose të ndërpresin ndryshe përdoruesin. Për më tepër, përfshini aria-atomic="true"për t'u siguruar që i gjithë dolli të shpallet gjithmonë si një njësi e vetme (atomike), në vend që të njoftoni se çfarë është ndryshuar (gjë që mund të çojë në probleme nëse përditësoni vetëm një pjesë të përmbajtjes së bukës ose nëse shfaqni të njëjtën përmbajtje të bukës në një moment i mëvonshëm në kohë). Nëse informacioni i nevojshëm është i rëndësishëm për procesin, p.sh. për një listë gabimesh në një formular, atëherë përdorni komponentin e alarmitnë vend të dolli.

Vini re se rajoni i drejtpërdrejtë duhet të jetë i pranishëm në shënim përpara se të gjenerohet ose përditësohet dolli. Nëse i gjeneroni në mënyrë dinamike të dyja në të njëjtën kohë dhe i injektoni ato në faqe, ato përgjithësisht nuk do të njoftohen nga teknologjitë ndihmëse.

Ju gjithashtu duhet të përshtatni nivelin roledhe aria-livenë varësi të përmbajtjes. Nëse është një mesazh i rëndësishëm si një gabim, përdorni role="alert" aria-live="assertive", përndryshe përdorni role="status" aria-live="polite"atributet.

Ndërsa përmbajtja që po shfaq ndryshon, sigurohuni që të përditësoni afatin delaypër t'u siguruar që njerëzit të kenë kohë të mjaftueshme për të lexuar dollinë.

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

Kur përdorni autohide: false, duhet të shtoni një buton mbyllje për t'i lejuar përdoruesit të heqin dolli.

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

Sjellja JavaScript

Përdorimi

Inicializoni dollitë përmes JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Emri Lloji E paracaktuar Përshkrim
animacion logjike e vërtetë Aplikoni një tranzicion të zbehjes së CSS në dolli
fsheh automatikisht logjike e vërtetë Fshih automatikisht dolli
vonesë numri 500 Vonesa e fshehjes së dolli (ms)

Metodat

Metodat dhe tranzicionet asinkrone

Të gjitha metodat API janë asinkrone dhe fillojnë një tranzicion . Ata kthehen te thirrësi sapo të fillojë tranzicioni, por para se të përfundojë . Përveç kësaj, një thirrje metodë në një komponent në tranzicion do të injorohet .

Shikoni dokumentacionin tonë JavaScript për më shumë informacion .

$().toast(options)

Bashkangjit një mbajtës dolli në një koleksion elementesh.

.toast('show')

Zbulon dollinë e një elementi. Kthehet te thirrësi përpara se dollia të shfaqet në të vërtetë (dmth. përpara se shown.bs.toastngjarja të ndodhë). Duhet ta telefononi manualisht këtë metodë, në vend të kësaj dolli juaj nuk do të shfaqet.

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

.toast('hide')

Fsheh dollinë e një elementi. Kthehet te thirrësi përpara se dollia të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.toastndodhë ngjarja). Ju duhet ta telefononi manualisht këtë metodë nëse keni bërë autohidenë false.

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

.toast('dispose')

Fsheh dollinë e një elementi. Dolli juaj do të mbetet në DOM, por nuk do të shfaqet më.

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

Ngjarjet

Lloji i ngjarjes Përshkrim
tregoj.bs.dolli Kjo ngjarje ndizet menjëherë kur showthirret metoda e shembullit.
treguar.bs.dolli Kjo ngjarje shfaqet kur dollia është bërë e dukshme për përdoruesin.
fsheh.bs.dolli Kjo ngjarje aktivizohet menjëherë kur hidethirret metoda e shembullit.
i fshehur.bs.dolli Kjo ngjarje aktivizohet kur dollia ka përfunduar së fshehuri nga përdoruesi. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})