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>

Aurretik, gure gidoiek klasea modu dinamikoan gehitzen zuten .hidebrindisa guztiz ezkutatzeko (ekin display:none, besterik gabe opacity:0). Hau orain ez da beharrezkoa. Hala ere, atzerako bateragarritasuna lortzeko, gure gidoiak klasea aldatzen jarraituko du (nahiz eta horren behar praktikorik ez dagoen) hurrengo bertsio nagusira arte.

Zuzeneko adibidea

Egin klik beheko botoian lehenespenez ezkutatu den tostada bat erakusteko (gure utilitateekin kokatuta beheko eskuineko izkinan).

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>

JavaScript hau erabiltzen dugu gure zuzeneko toast demoa abiarazteko:

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

    toast.show()
  })
}

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 kentzen 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 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 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($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);

Erabilera

Hasieratu tostadak JavaScript bidez:

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

Abiarazleak

Baztertzea toastaren barruan dagoendata botoi baten atributuarekin lor daiteke, behean erakusten den moduan:

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

edo tostadatik kanpokodata-bs-target botoi batean behean erakusten den moduan erabiliz :

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

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

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

toast.show()

hide

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

toast.hide()

dispose

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

toast.dispose()

getInstance

Static method which allows you to get the toast instance associated with a DOM element

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

getOrCreateInstance

Static method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn’t initialized

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

Events

Event type	Description
`show.bs.toast`	This event fires immediately when the `show` instance method is called.
`shown.bs.toast`	This event is fired when the toast has been made visible to the user.
`hide.bs.toast`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.toast`	This event is fired when the toast has finished being hidden from the user.

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