Toasts

Alefaso ny fampandrenesana ho an'ny mpitsidika anao miaraka amin'ny toast, hafatra fanairana maivana ary mora azo amboarina.

Amin'ity pejy ity

Ny toast dia fampandrenesana maivana natao haka tahaka ny fampandrenesana fanosehana izay nalaza tamin'ny rafitra fiasana finday sy desktop. Namboarina tamin'ny flexbox izy ireo, noho izany dia mora ny mandrindra sy mametraka azy ireo.

Overview

Zavatra tokony ho fantatra rehefa mampiasa ny plugin toast:

Ny toast dia nisafidy noho ny antony fampisehoana, ka tsy maintsy ataonao voalohany izy ireo .
Hafenina ho azy ny toasts raha tsy voatondro autohide: false.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

OHATRA

Basic

Mba hamporisihana toast azo itarina sy azo vinavinaina, dia manoro hevitra ny lohapejy sy vatana. Ny lohatenin'ny toast dia ampiasaina display: flex, mamela ny fampifanarahana mora amin'ny atiny noho ny fampiasanay margin sy flexbox.

Ny toast dia malefaka araka izay ilainao ary manana marika kely ilaina. Farafaharatsiny, mitaky singa tokana izahay mba hitehirizana ny atiny “voatoto” ary mamporisika mafy ny bokotra fandroahana.

Hello World! Hafatra toast ity.

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>

Teo aloha, ny scripty dia nanampy ny .hidekilasy hanafenana tanteraka ny toast (miaraka amin'ny display:none, fa tsy miaraka amin'ny opacity:0). Tsy ilaina intsony izany ankehitriny. Na izany aza, ho an'ny fampifanarahana mihemotra, ny scripty dia hanohy hanodina ny kilasy (na dia tsy ilaina aza izany) mandra-pahatongan'ny dikan-teny lehibe manaraka.

Ohatra mivantana

Kitiho ny bokotra eto ambany raha te hampiseho toast (apetraka miaraka amin'ny fitaovanay eo amin'ny zoro havanana ambany) izay nafenina tamin'ny alàlan'ny default.

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>

Mampiasa ity JavaScript manaraka ity izahay hanetsika ny demo toast mivantana:

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

    toast.show()
  })
}

Translucent

Somary mangarahara ny toast mba hifangaro amin'izay eo ambany.

Hello World! Hafatra toast ity.

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>

Stacking

Azonao atao ny manangom-bokatra amin'ny alàlan'ny famonosana azy ao anaty fitoeran-toast, izay hampisy elanelana mitsangana.

Hitanareo? Toy izao ihany.

Misondrotra, hapetraka ho azy ny toasts

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>

atiny manokana

Amboary ny toasts anao amin'ny alàlan'ny fanesorana ireo singa fototra, asio azy ireo amin'ny fitaovana ampiasaina , na amin'ny fampidirana ny marikao manokana. Eto izahay dia namorona toast tsotra kokoa amin'ny alàlan'ny fanesorana ny default .toast-header, manampy kisary manafina mahazatra avy amin'ny Bootstrap Icons , ary mampiasa fitaovana flexbox sasany hanitsiana ny lamina .

Hello World! Hafatra toast ity.

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>

Azonao atao ihany koa ny manampy fanaraha-maso sy singa fanampiny amin'ny toast.

Hello World! Hafatra toast ity.

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>

Tetika loko

Miorina amin'ny ohatra etsy ambony, azonao atao ny mamorona lokon'ny toast samihafa miaraka amin'ny fampiasantsika loko sy fiaviana . Eto izahay dia nanampy .text-bg-primaryny .toast, ary avy eo dia nampidirinay .btn-close-whitetamin'ny bokotra akaiky. Ho an'ny sisiny manjavozavo dia esorinay ny sisintany mahazatra miaraka amin'ny .border-0.

Hello World! Hafatra toast ity.

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>

fametrahana

Mametraha toast miaraka amin'ny CSS mahazatra araka izay ilainao. Ny ambony havanana dia matetika ampiasaina amin'ny fampahafantarana, toy ny eo afovoany ambony. Raha toa ianao ka hampiseho toast iray isaky ny mandeha dia apetraho eo amin'ny .toast.

Hello World! Hafatra toast ity.

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>

Ho an'ny rafitra miteraka fampandrenesana bebe kokoa dia diniho ny fampiasana singa famonosana mba hahafahan'izy ireo mitambatra mora foana.

Hitanareo? Toy izao ihany.

Misondrotra, hapetraka ho azy ny toasts

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>

Azonao atao ihany koa ny mirefy amin'ny fitaovana flexbox mba hampifanaraka ny toast amin'ny horizontaly sy/na mitsangana.

Hello World! Hafatra toast ity.

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>

Accessibility

Ny toast dia natao ho fanelingelenana kely ho an'ny mpitsidika na mpampiasa anao, ka mba hanampiana ireo manana mpamaky efijery sy teknolojia fanampiana mitovy amin'izany, dia tokony hafeninao amin'ny aria-livefaritra iray ny toasts . Ny fiovana amin'ny faritra velona (toy ny fanindronana/fanavaozana ny singa toast) dia ambaran'ny mpamaky efijery ho azy fa tsy mila manetsika ny fifantohan'ny mpampiasa na manapaka ny mpampiasa. Fanampin'izany, ampidiro aria-atomic="true"mba hahazoana antoka fa ny toast iray manontolo dia nambara ho singa tokana (atomika), fa tsy manambara fotsiny izay niova (izay mety hiteraka olana raha manavao ampahany amin'ny votoatin'ny toast fotsiny ianao, na raha mampiseho atiny toast mitovy amin'izany. amin'ny fotoana manaraka). Raha zava-dehibe amin'ny dingana ny fampahalalana ilaina, ohatra amin'ny lisitry ny lesoka amin'ny endrika iray, dia ampiasao ny singa fanairanaho solon'ny mofo mofo.

Mariho fa ny faritra velona dia tsy maintsy misy ao amin'ny marika alohan'ny hamokarana na havaozina ny toast. Raha mamorona azy roa miaraka ianao ary manindrona azy ireo ao amin'ny pejy, dia tsy hambara amin'ny teknolojia fanampiana izy ireo.

Ilainao koa ny mampifanaraka ny rolesy ny aria-livehaavony arakaraka ny atiny. Raha hafatra manan-danja toy ny hadisoana dia ampiasao role="alert" aria-live="assertive", raha tsy izany dia ampiasao role="status" aria-live="polite"ny toetra.

Satria miova ny atiny asehonao, ataovy azo antoka ny fanavaozana ny delayfe -potoana mba hanana fotoana ampy hamakiana ny toast ny mpampiasa.

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

Rehefa mampiasa autohide: false, dia tsy maintsy manampy bokotra akaiky ianao mba hamela ny mpampiasa hanilika ny toast.

Hello World! Hafatra toast ity.

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>

Raha ara-teknika dia azo atao ny manampy fanaraha-maso azo ianteherana/azo atao (toy ny bokotra fanampiny na rohy) ao amin'ny toast anao, tokony hialana amin'ny fanaovana izany ianao amin'ny fanafenana toast. Na dia omenao fotoana lava be aza ny toast delay, dia mety ho sarotra amin'ny mpampiasa ny fitendry sy ny teknolojia manampy ny hahatongavana amin'ny toast ara-potoana hanaovana hetsika (satria tsy mahazo fifantohana ny toast rehefa aseho). Raha toa ka tsy maintsy manana fanaraha-maso bebe kokoa ianao, dia manoro hevitra ny hampiasa toast miaraka amin'ny autohide: false.

CSS

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny toast izao dia mampiasa ny fari-piadidiana CSS eo an .toast-toerana mba hanatsarana ny fanamboarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

  --#{$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 variables

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

Fampiasana

Atombohy ny toast amin'ny JavaScript:

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

Niteraka

Ny fandroahana dia azo atao amin'ny datatoetra amin'ny bokotra iray ao anatin'ny toast araka ny aseho eto ambany:

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

na amin'ny bokotra iray ivelan'ny toast amin'ny fampiasana ny data-bs-targetaseho eto ambany:

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

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Anarana	Type	toerana misy anao	Description
`animation`	boolean	`true`	Ampiharo CSS fade transition amin'ny toast.
`autohide`	boolean	`true`	Afeno ho azy ny toast aorian'ny fahatarana.
`delay`	isa	`5000`	Tara ao anatin'ny milisegondra alohan'ny hanafenana ny toast.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

FOMBA	Description
`dispose`	Manafina ny toast an'ny singa iray. Hijanona ao amin'ny DOM ny mofonao fa tsy hiseho intsony.
`getInstance`	Fomba static izay ahafahanao mahazo ny ohatra toast mifandray amin'ny singa DOM. Ohatra: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Mamerina ohatra toast Bootstrap.
`getOrCreateInstance`	Fomba static izay ahafahanao mahazo ny ohatra toast mifandray amin'ny singa DOM, na mamorona iray vaovao, raha toa ka tsy natomboka izany. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Mamerina ohatra toast Bootstrap.
`hide`	Manafina ny toast an'ny singa iray. Miverina amin'ny mpiantso alohan'ny nafenina ny toast (izany hoe alohan'ny `hidden.bs.toast`nitrangan'ny hetsika). Tsy maintsy miantso an'io fomba io ianao raha `autohide`nanao `false`.
`isShown`	Mamerina booleana araka ny toetry ny fahitana ny toast.
`show`	Mampiseho toast an'ny singa iray. Miverina any amin'ny mpiantso alohan'ny nampisehoana ny toast (izany hoe alohan'ny `shown.bs.toast`nitrangan'ny hetsika). Tsy maintsy miantso an'io fomba io ianao, fa tsy hiseho ny mofonao.

zava-mitranga

Event	Description
`hide.bs.toast`	Ity hetsika ity dia alefa avy hatrany rehefa `hide`nantsoina ny fomba fiasa.
`hidden.bs.toast`	Ity hetsika ity dia alefa rehefa vita ny nafenina tamin'ny mpampiasa ny toast.
`show.bs.toast`	Mirehitra avy hatrany ity hetsika ity rehefa `show`antsoina ny fomba fiasa.
`shown.bs.toast`	Ity hetsika ity dia alefa rehefa naseho ho hitan'ny mpampiasa ny toast.

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