Dollitë

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

Në këtë faqe

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:

Dollitë janë të zgjedhura për arsye të performancës, ndaj duhet t'i inicializoni vetë .
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.

Përshendetje Botë! Ky është një mesazh dolli.

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

Më parë, skriptet tona e shtuan në mënyrë dinamike .hideklasën për të fshehur plotësisht një dolli (me display:none, dhe jo vetëm me opacity:0). Kjo tani nuk është më e nevojshme. Megjithatë, për pajtueshmërinë e pasme, skripti ynë do të vazhdojë të ndërrojë klasën (edhe pse nuk ka nevojë praktike për të) deri në versionin tjetër kryesor.

Shembull i gjallë

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.

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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>

Ne përdorim JavaScript-in e mëposhtëm për të aktivizuar demonstrimin tonë të dolli të drejtpërdrejtë:

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

    toast.show()
  })
}

E tejdukshme

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

Përshendetje Botë! Ky është një mesazh dolli.

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

Stacking

Mund të grumbulloni bukë të thekur duke i mbështjellë në një enë buke, e cila vertikalisht do të shtojë pak hapësirë.

Shiko? Pikërisht si kjo.

Kujdes, dollitë do të grumbullohen automatikisht

<div class="toast-container">
  <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>

Përmbajtje e personalizuar

Personalizojini dollitë tuaja duke hequr nën-komponentët, duke i rregulluar ato me shërbime ose duke shtuar shënimin tuaj. Këtu kemi krijuar një dolli më të thjeshtë duke hequr parazgjedhjen .toast-header, duke shtuar një ikonë të personalizuar të fshehjes nga Bootstrap Icons dhe duke përdorur disa shërbime flexbox për të rregulluar paraqitjen.

Përshendetje Botë! Ky është një mesazh dolli.

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

Përndryshe, ju gjithashtu mund të shtoni kontrolle dhe përbërës shtesë në dolli.

Përshendetje Botë! Ky është një mesazh dolli.

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

Skemat e ngjyrave

Duke u bazuar në shembullin e mësipërm, ju mund të krijoni skema të ndryshme ngjyrash dolli me shërbimet tona të ngjyrave dhe sfondit . Këtu kemi shtuar .bg-primarydhe .text-whitenë .toast, dhe më pas kemi shtuar .btn-close-whitenë butonin tonë të mbylljes. Për një skaj të qartë, ne heqim kufirin e paracaktuar me .border-0.

Përshendetje Botë! Ky është një mesazh dolli.

<div class="toast align-items-center text-white 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>

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.

Përshendetje Botë! Ky është një mesazh dolli.

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

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.

Shiko? Pikërisht si kjo.

Kujdes, dollitë do të grumbullohen automatikisht

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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>

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

Përshendetje Botë! Ky është një mesazh dolli.

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

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ë bukës 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-bs-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.

Përshendetje Botë! Ky është një mesazh dolli.

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

Ndërsa teknikisht është e mundur të shtoni kontrolle të fokusueshme/vepruese (të tilla si butona ose lidhje shtesë) në tostin 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.

Sass

Variablat

$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:                1px;
$toast-border-color:                rgba($black, .1);
$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);

Përdorimi

Inicializoni dollitë përmes JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Shkaqet

Largimi mund të arrihet me dataatributin në një buton brenda dolli siç tregohet më poshtë:

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

ose në një buton jashtë dolli duke përdorur data-bs-targetsiç tregohet më poshtë:

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

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-bs-, si në data-bs-animation="".

Emri	Lloji	E paracaktuar	Përshkrim
`animation`	logjike	`true`	Aplikoni një tranzicion të zbehjes së CSS në dolli
`autohide`	logjike	`true`	Fshih automatikisht dolli
`delay`	numri	`5000`	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 .

shfaqje

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.

toast.show()

fshehin

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.

toast.hide()

disponoj

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

toast.dispose()

getInstance

Metoda statike e cila ju lejon të merrni shembullin e dolli të lidhur me një element DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Metoda statike e cila ju lejon të merrni shembullin e dolli të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Ngjarjet

Lloji i ngjarjes	Përshkrim
`show.bs.toast`	Kjo ngjarje ndizet menjëherë kur `show`thirret metoda e shembullit.
`shown.bs.toast`	Kjo ngjarje shfaqet kur dollia është bërë e dukshme për përdoruesin.
`hide.bs.toast`	Kjo ngjarje aktivizohet menjëherë kur `hide`thirret metoda e shembullit.
`hidden.bs.toast`	Kjo ngjarje aktivizohet kur dollia ka përfunduar së fshehuri nga përdoruesi.

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