in English

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>

Jetoni

Klikoni butonin më poshtë për të shfaqur një dolli (të pozicionuar me shërbimet tona në këndin e poshtëm djathtas) që është fshehur si parazgjedhje me .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

Të tejdukshme

Dollitë janë paksa të tejdukshme për t'u përzier me atë që është poshtë tyre.

<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="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ë thjesht të njoftoni se çfarë është ndryshuar (që mund të çojë në probleme nëse përditësoni vetëm një pjesë të përmbajtjes së dollisë ose nëse shfaqni të njëjtën përmbajtje të bukës në një moment të 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, sigurohu që të përditësosh afatin në delaymënyrë që përdoruesit të kenë kohë të mjaftueshme për të lexuar dolli.

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

Ndërsa teknikisht është e mundur të shtoni kontrolle të fokusueshme/vepruese (të tilla si butona ose lidhje shtesë) në dollinë tuaj, duhet të shmangni ta bëni këtë për fshehjen automatike të dollive. Edhe nëse i jepni dolli një kohë të gjatë delay, përdoruesit e tastierës dhe teknologjisë ndihmëse mund ta kenë të vështirë ta arrijnë në kohë dollinë për të ndërmarrë veprime (pasi dollitë nuk marrin fokus kur shfaqen). Nëse duhet patjetër të keni kontrolle të mëtejshme, ju rekomandojmë të përdorni një dolli me autohide: false.

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