Source

Tostadak

Bidali jakinarazpenak zure bisitariei brindis batekin, arin eta erraz pertsonaliza daitekeen alerta-mezu batekin.

Tostadak mugikor eta mahaigaineko sistema eragileek ezagun egin dituzten push jakinarazpenak imitatzeko diseinatutako jakinarazpen arinak dira. Flexbox-ekin eraikita daude, erraz lerrokatzeko eta kokatzeko.

Ikuspegi orokorra

Toast plugina erabiltzean jakin beharrekoak:

  • Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da .
  • Tostadak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
  • Kontuan izan tostadak kokatzeko ardura zarela.
  • Tostadak automatikoki ezkutatuko dira zehazten ez baduzu autohide: false.

Osagai honen animazio-efektua prefers-reduced-motionmultimedia kontsultaren menpe dago. Ikusi gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .

Adibideak

Oinarrizkoa

Topa zabalgarriak eta aurreikusgarriak bultzatzeko, goiburua eta gorputza gomendatzen ditugu. Toast goiburuek erabiltzen dute display: flex, edukia erraz lerrokatzea ahalbidetuz gure marjina eta flexbox utilitateei esker.

Tostadak behar bezain malguak dira eta behar den markatze gutxi dute. Gutxienez, elementu bakar bat eskatzen dugu zure edukia "txigortua" edukitzeko eta baztertzeko botoia gogor sustatu.

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

zeharrargitsuak

Tostadak ere apur bat zeharrargitsuak dira, beraz, ager daitezkeen guztiarekin nahasten dira. CSS propietatea onartzen duten arakatzaileentzat backdrop-filter, elementuak topa baten azpian lausotzen ere saiatuko gara.

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

Pilatzea

Tostada bat baino gehiago dituzunean, bertikalean pilatzen ditugu modu irakurgarrian.

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

Kokapen

Jarri tostadak CSS pertsonalizatuarekin behar dituzun moduan. Goiko eskuineko aldea jakinarazpenetarako erabili ohi da, goiko erdikoa bezala. Inoiz brindis bat bakarrik erakutsiko baduzu, jarri kokapen-estiloak .toast.

Bootstrap Duela 11 minutu
Kaixo Mundua! Hau topa mezu bat da. 
<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>

Jakinarazpen gehiago sortzen dituzten sistemetarako, kontuan hartu biltzeko elementu bat erabiltzea erraz pilatu ahal izateko.

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

Flexbox utilitateekin ere lor dezakezu tostadak horizontalean eta/edo bertikalean lerrokatzeko.

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

Irisgarritasuna

Tostadak zure bisitari edo erabiltzaileentzako eten txikiak izan nahi ditu; beraz, pantaila-irakurgailuak eta antzeko laguntza-teknologiak dituztenei laguntzeko, tostadak aria-liveeskualde batean bildu behar dituzu . Zuzeneko eskualdeen aldaketak (adibidez, tostadaren osagai bat injektatzea/eguneratzea) automatikoki iragartzen dituzte pantaila-irakurleek erabiltzailearen fokua mugitu beharrik gabe edo erabiltzailea eten beharrik gabe. Gainera, sartu aria-atomic="true"tostada osoa unitate (atomiko) bakar gisa iragartzen dela ziurtatzea, aldatutakoa iragartzea baino (horrek arazoak sor ditzake tostatuaren edukiaren zati bat soilik eguneratzen baduzu edo tostadaren eduki bera bistaratzen baduzu). geroagoko puntu bat). Beharrezko informazioa prozesurako garrantzitsua bada, adibidez inprimaki bateko akatsen zerrendarako, erabili alerta-osagaiatopa egin beharrean.

Kontuan izan zuzeneko eskualdea markazioan egon behar dela brindisa sortu edo eguneratu aurretik . Biak aldi berean dinamikoki sortzen badituzu eta orrialdean sartzen badituzu, orokorrean ez dira teknologia laguntzaileek iragarriko.

roleGainera, edukiaren arabera eta aria-livemaila egokitu behar duzu . Errore bat bezalako mezu garrantzitsu bat bada, erabili role="alert" aria-live="assertive", bestela erabili role="status" aria-live="polite"atributuak.

Bistaratzen ari zaren edukia aldatzen doan heinean, ziurtatu denbora- delaymuga eguneratzen duzula jendeak brindisa irakurtzeko denbora nahikoa duela ziurtatzeko.

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

Erabiltzen duzunean autohide: false, ixteko botoia gehitu behar duzu erabiltzaileek topa baztertu dezaten.

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

Erabilera

Hasieratu tostadak JavaScript bidez:

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

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-animation="".

Izena Mota Lehenetsia Deskribapena
animazioa boolearra egia Aplikatu CSS desagertzeko trantsizioa toastean
autoezkutatu boolearra egia Ezkutatu tostada automatikoki
atzerapena zenbakia 500 Topa ezkutatzen atzeratu (ms)

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

$().toast(options)

Elementu bilduma bati tosta-kudeatzailea eransten dio.

.toast('show')

Elementu baten topa erakusten du. Topa benetan erakutsi aurretik (hau da, shown.bs.toastgertaera gertatu baino lehen) itzultzen da deitzen duenari. Metodo honi eskuz deitu behar diozu, zure topa ez da agertuko.

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

.toast('hide')

Elementu baten tostadak ezkutatzen ditu. Topa benetan ezkutatu aurretik (hau da, gertaera gertatu baino lehen) itzultzen da deitzen duenari . Metodo honi eskuz deitu behar hidden.bs.toastdiozu .autohidefalse

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

.toast('dispose')

Elementu baten tostadak ezkutatzen ditu. Zure brindisa DOM-en geratuko da, baina ez da gehiago erakutsiko.

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

Gertaerak

Gertaera mota Deskribapena
erakutsi.bs.tostada Gertaera hau berehala abiarazten da showinstantzia-metodoa deitzen denean.
erakusten.bs.tostada Gertaera hau tostada erabiltzailearentzat ikusgai jartzen denean abiarazten da.
ezkutatu.bs.tostada Gertaera hau berehala abiarazten da hideinstantzia-metodoa deitzen denean.
ezkutuan.bs.tostada Gertaera hau tostada erabiltzaileari ezkutatzen amaitzen denean abiarazten da. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})