Tostadak

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

Orrialde honetan

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:

Tostadak errendimendu arrazoiengatik aukeratzen dira, beraz, zuk zeuk hasieratu behar dituzu .
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.

Kaixo Mundua! Hau topa mezu bat da.

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

Zuzenean

Egin klik beheko botoian tostada bat erakusteko (gure utilitateekin kokatua beheko eskuineko izkinan) lehenespenez ezkutatu dena .hide.

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

zeharrargitsuak

Tostadak zertxobait zeharrargitsuak dira azpian dagoenarekin nahasteko.

Kaixo Mundua! Hau topa mezu bat da.

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

Pilatzea

Tostadak pila ditzakezu ogi-ontzi batean bilduta, eta horrek bertikalki tartea gehituko du.

Ikusi? Honela.

Adi, tostadak automatikoki pilatuko dira

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

Eduki pertsonalizatuak

Pertsonalizatu tostadak azpiosagaiak kenduz, utilitateekin doituz edo zure marka propioa gehituz. Hemen topa errazagoa sortu dugu lehenetsia kenduz, .toast-headerezkutatzeko ikono pertsonalizatu bat gehituz Bootstrap ikonoetatik eta flexbox -ren erabilgarritasun batzuk erabiliz diseinua doitzeko.

Kaixo Mundua! Hau topa mezu bat da.

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

Bestela, kontrol eta osagai osagarriak ere gehi ditzakezu tostadendako.

Kaixo Mundua! Hau topa mezu bat da.

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

Kolore-eskemak

Goiko adibidean oinarrituta, tostada kolore-eskema desberdinak sor ditzakezu gure kolore eta atzeko erabilgarritasunekin. Hemen gehitu dugu .bg-primaryeta .text-white, .toasteta gero .btn-close-whitegure itxi botoian gehitu dugu. Ertz zorrotza izateko, ertza lehenetsia kenduko dugu .border-0.

Kaixo Mundua! Hau topa mezu bat da.

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

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.

Kaixo Mundua! Hau topa mezu bat da.

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

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

Ikusi? Honela.

Adi, tostadak automatikoki pilatuko dira

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

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

Kaixo Mundua! Hau topa mezu bat da.

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

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 eskualdeetan aldaketak (adibidez, tostada osagai bat injektatzea/eguneratzea) pantaila-irakurleek automatikoki iragartzen dituzte 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 tostadaren edukiaren zati bat soilik eguneratzen baduzu edo tostadako eduki bera bistaratzen baduzu). geroagoko une batean). 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, erabiltzaileek brindisa irakurtzeko adina denbora izan dezaten.

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

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

Kaixo Mundua! Hau topa mezu bat da.

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

Teknikoki, toastetan foka daitezkeen/ekintza daitezkeen kontrolak gehitzea posible den arren (adibidez, botoi edo estekak gehigarriak), saihestu beharko zenuke hori egitea tostadak automatikoki ezkutatzeko. delayTostadari denbora- muga luzea ematen badiozu ere, baliteke teklatuaren eta laguntza-teknologiaren erabiltzaileei zaila izatea toastera neurriak hartzeko garaiz iristea (toastek ez baitute fokurik jasotzen bistaratzen direnean). Kontrol gehiago izan behar badituzu, tostada bat erabiltzea gomendatzen dugu autohide: false.

Sass

Aldagaiak

$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(0, 0, 0, .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(0, 0, 0, .05);

Erabilera

Hasieratu tostadak JavaScript bidez:

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

Aukerak

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

Izena	Mota	Lehenetsia	Deskribapena
`animation`	boolearra	`true`	Aplikatu CSS desagertzeko trantsizioa toastean
`autohide`	boolearra	`true`	Ezkutatu tostada automatikoki
`delay`	zenbakia	`5000`	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 .

erakutsi

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.

toast.show()

ezkutatu

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

toast.hide()

bota

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

toast.dispose()

getInstance

Metodo estatikoa DOM elementu batekin lotutako scrollspy instantzia lortzeko aukera ematen duena

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

getOrCreateInstance

Metodo estatikoa DOM elementu batekin erlazionatutako scrollspy instantzia lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen.

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

Gertaerak

Gertaera mota	Deskribapena
`show.bs.toast`	Gertaera hau berehala abiarazten da `show`instantzia-metodoa deitzen denean.
`shown.bs.toast`	Gertaera hau tostada erabiltzailearentzat ikusgai jartzen denean abiarazten da.
`hide.bs.toast`	Gertaera hau berehala abiarazten da `hide`instantzia-metodoa deitzen denean.
`hidden.bs.toast`	Gertaera hau tostada erabiltzaileari ezkutatzen amaitzen denean abiarazten da.

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