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.

html

<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="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

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

    toast.show()
  })
}

zeharrargitsuak

Tostadak zertxobait zeharrargitsuak dira azpian dagoenarekin nahasteko.

Kaixo Mundua! Hau topa mezu bat da.

html

<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

html

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

html

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

html

<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 .text-bg-primary, .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.

html

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

html

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

html

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

html

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

html

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

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren barruan, toastek orain CSS aldagai lokalak erabiltzen dituzte .toastdenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Abiarazleak

Baztertzea tostada 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 daitezkeenez, aukera-izen bat gehi diezaiokezu data-bs-, honela data-bs-animation="{value}". Ziurtatu aukera-izenaren kasu-mota " camelCase "-tik " kebab-case "-ra aldatzen duzula aukerak datu-atributuen bidez pasatzen dituzunean. Adibidez, erabili data-bs-custom-class="beautifier"ordez data-bs-customClass="beautifier".

Bootstrap 5.2.0-tik aurrera, osagai guztiek erreserbatutako datu-atributu esperimentaldata-bs-config bat onartzen dute , osagaien konfigurazio sinplea JSON kate gisa gorde dezakeena. Elementu batek data-bs-config='{"delay":0, "title":123}'eta data-bs-title="456"atributuak dituenean, azken titlebalioa izango da 456eta bereizitako datu-atributuek gailuan emandako balioak gainidatziko dituzte data-bs-config. Gainera, lehendik dauden datu-atributuek JSON balioak gorde ditzakete data-bs-delay='{"show":0,"hide":150}'.

Izena	Mota	Lehenetsia	Deskribapena
`animation`	boolearra	`true`	Aplikatu CSS desagertzeko trantsizioa toastean.
`autohide`	boolearra	`true`	Ezkutatu automatikoki topa atzerapenaren ondoren.
`delay`	zenbakia	`5000`	Atzeratu milisegundotan tostada ezkutatu aurretik.

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 .

Metodoa	Deskribapena
`dispose`	Elementu baten tostadak ezkutatzen ditu. Zure brindisa DOM-en geratuko da baina ez da gehiago erakutsiko.
`getInstance`	Metodo estatikoa DOM elementu batekin lotutako tostada instantzia lortzeko aukera ematen duena. Adibidez: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap toast instantzia bat itzultzen du.
`getOrCreateInstance`	Metodo estatikoa , DOM elementu batekin lotutako toast instantzia lortzeko edo berri bat sortzeko aukera ematen duena, hasieratu ez bazen. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap toast instantzia bat itzultzen du.
`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.toast`diozu .`autohidefalse`
`isShown`	Boolear bat itzultzen du toast-en ikusgarritasun-egoeraren arabera.
`show`	Elementu baten topa erakusten du. Topa benetan erakutsi aurretik (hau da, `shown.bs.toast`gertaera gertatu baino lehen) itzultzen da deitzen duenari. Metodo honi eskuz deitu behar diozu, zure topa ez da agertuko.

Gertaerak

Gertaera	Deskribapena
`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.
`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.

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