Röstsaid

Lükake oma külastajatele märguandeid röstsaiaga, kerge ja hõlpsasti kohandatava hoiatussõnumiga.

Sellel lehel

Röstsaad on kerged märguanded, mis on loodud mobiiltelefonide ja lauaarvutite operatsioonisüsteemide poolt populaarseks muutunud push-teavituste jäljendamiseks. Need on ehitatud flexboxiga, nii et neid on lihtne joondada ja positsioneerida.

Ülevaade

Asjad, mida röstsaia pistikprogrammi kasutamisel teada saada:

Röstsaid on tulemuslikkuse huvides lubatud, seega peate need ise lähtestama .
Kui te seda ei määra, peidetakse röstsaiad automaatselt autohide: false.

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Näited

Põhiline

Laiendatavate ja prognoositavate röstsaitide julgustamiseks soovitame kasutada päist ja keha. Röstsaa päised kasutavad display: flex, mis võimaldab tänu meie veerise ja flexboxi utiliitidele sisu hõlpsat joondamist.

Röstsaid on nii paindlikud kui vaja ja neil on väga vähe nõutavat juurdehindlust. Nõuame teie röstitud sisu sisaldama vähemalt ühte elementi ja soovitame tungivalt loobumisnupu kasutamist.

Tere, Maailm! See on toosti sõnum.

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>

Varem lisasid meie skriptid .hideklassi dünaamiliselt, et röstsaat täielikult peita ( display:nonemitte lihtsalt klahviga opacity:0). Nüüd pole see enam vajalik. Tagasiühilduvuse tagamiseks jätkab meie skript aga klassi vahetamist (kuigi selleks pole praktilist vajadust) kuni järgmise suurema versioonini.

Elav näide

Vaikimisi peidetud röstsaia kuvamiseks klõpsake alloleval nupul (mis on paremas alanurgas meie utiliitidega).

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>

Reaalajas toosti demo käivitamiseks kasutame järgmist JavaScripti:

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

    toast.show()
  })
}

Läbipaistev

Röstsaivad on kergelt läbipaistvad, et sulanduda nende all olevaga.

Tere, Maailm! See on toosti sõnum.

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>

Virnastamine

Saate röstsaiad virna panna, mähkides need röstsaia anumasse, mis lisab vertikaalselt veidi vahet.

Näete? Just niimoodi.

Tähelepanu, röstsaiad virnatakse automaatselt

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>

Kohandatud sisu

Kohandage oma toosti, eemaldades alamkomponente, kohandades neid utiliitidega või lisades oma märgistuse. Siin oleme loonud lihtsama toosti, eemaldades vaikimisi , lisades Bootstrap.toast-header Icons'ist kohandatud peitmise ikooni ja kasutades paigutuse kohandamiseks mõnda flexboxi utiliiti .

Tere, Maailm! See on toosti sõnum.

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>

Teise võimalusena saate röstsaiadele lisada ka täiendavaid juhtelemente ja komponente.

Tere, Maailm! See on toosti sõnum.

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>

Värvilahendused

Ülaltoodud näitele tuginedes saate meie värvi- ja taustautiliitidega luua erinevaid röstsaia värvilahendusi . Siin oleme lisanud .text-bg-primarynupule .toastja seejärel .btn-close-whitesulgemisnupule. Terava serva saamiseks eemaldame vaikeäärise nupuga .border-0.

Tere, Maailm! See on toosti sõnum.

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>

Paigutus

Asetage röstsaiad kohandatud CSS-iga vastavalt vajadusele. Ülemist paremat ülaosa kasutatakse sageli märguannete jaoks, nagu ka ülemist keskmist osa. Kui kavatsete näidata ainult ühte toosti korraga, asetage positsioneerimisstiilid otse .toast.

Tere, Maailm! See on toosti sõnum.

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>

Süsteemide puhul, mis genereerivad rohkem teatisi, kaaluge ümbriselemendi kasutamist, et neid saaks hõlpsalt virnastada.

Näete? Just niimoodi.

Tähelepanu, röstsaiad virnatakse automaatselt

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>

Flexboxi utiliitide abil saate röstsaiad horisontaalselt ja/või vertikaalselt joondada.

Tere, Maailm! See on toosti sõnum.

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>

Juurdepääsetavus

Röstsaad on mõeldud külastajatele või kasutajatele väikesteks katkestusteks, nii et ekraanilugejate ja sarnaste abitehnoloogiatega inimeste abistamiseks peaksite oma toostid pakkima aria-livepiirkonnas . Ekraanilugejad teatavad reaalajas piirkondade muudatustest (nt röstsaia komponendi süstimine/värskendamine) automaatselt, ilma et oleks vaja kasutaja fookust liigutada või muul viisil kasutajat katkestada. Lisaks lisage aria-atomic="true"see tagamaks, et kogu röstsaia kuulutatakse alati välja ühe (aatomi) ühikuna, mitte ainult muudatustest teavitamise asemel (mis võib põhjustada probleeme, kui värskendate ainult osa röstsaia sisust või kui kuvatakse sama röstsaia sisu hilisemal ajahetkel). Kui vajalik teave on protsessi jaoks oluline, nt vormi vigade loendi jaoks, kasutage hoiatuskomponentiröstsaia asemel.

Pange tähele, et reaalajas piirkond peab märgistuses olema enne röstsaia loomist või värskendamist. Kui genereerite mõlemad korraga dünaamiliselt ja sisestate need lehele, siis abitehnoloogiad neid üldjuhul ei teavita.

Samuti peate kohandama roleja aria-livetaset olenevalt sisust. Kui see on oluline teade, näiteks tõrge, kasutage role="alert" aria-live="assertive", muul juhul kasutage role="status" aria-live="polite"atribuute.

Kuna kuvatav sisu muutub, värskendage kindlasti delayajalõppu , et kasutajatel oleks piisavalt aega röstsaia lugemiseks.

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

Kui kasutate autohide: false, peate lisama sulgemisnupu, et kasutajad saaksid röstsaiast loobuda.

Tere, Maailm! See on toosti sõnum.

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>

Kuigi tehniliselt on röstsaiale võimalik lisada fokuseeritavaid/toimivaid juhtnuppe (nt täiendavaid nuppe või linke), peaksite vältima seda röstsaiade automaatse peitmise korral. Isegi kui annate röstsaiale pika delayajalõpu , võib klaviatuuri ja abitehnoloogia kasutajatel olla raske röstsaiale õigel ajal jõuda, et midagi ette võtta (kuna röstsaiad ei keskendu kuvamisel). Kui teil on kindlasti vaja täiendavaid juhtnuppe, soovitame kasutada röstsaia koos autohide: false.

CSS

Muutujad

Lisatud versioonisse v5.2.0

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad toostid nüüd kohalikke CSS-i muutujaid, .toastet täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

  --#{$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};

Sassi muutujad

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

Kasutamine

Toostide lähtestamine JavaScripti kaudu:

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

Päästikud

Vallandumise saab saavutada röstsaiadata nupul oleva atribuudiga, nagu on näidatud allpool:

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

või nupul väljaspool röstsaia , kasutades järgmist data-bs-target:

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

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Nimi	Tüüp	Vaikimisi	Kirjeldus
`animation`	tõeväärtus	`true`	Rakendage röstsaiale CSS-i tuhmumise üleminek.
`autohide`	tõeväärtus	`true`	Peida röstsai pärast viivitust automaatselt.
`delay`	number	`5000`	Viivitage millisekundites enne röstsaia peitmist.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

meetod	Kirjeldus
`dispose`	Peidab elemendi röstsaia. Teie röstsai jääb DOM-i, kuid seda enam ei kuvata.
`getInstance`	Staatiline meetod, mis võimaldab hankida DOM-i elemendiga seotud toosti eksemplari. Näiteks: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Tagastab Bootstrapi toosti eksemplari.
`getOrCreateInstance`	Staatiline meetod, mis võimaldab teil hankida DOM-i elemendiga seotud toosti eksemplari või luua uue, juhul kui seda ei lähtestatud. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Tagastab Bootstrapi toosti eksemplari.
`hide`	Peidab elemendi röstsaia. Naaseb helistaja juurde enne, kui toost on tegelikult peidetud (st enne `hidden.bs.toast`sündmuse toimumist). Kui tegite selle meetodi, peate selle meetodi käsitsi `autohide`kutsuma `false`.
`isShown`	Tagastab tõeväärtuse vastavalt röstsaia nähtavuse olekule.
`show`	Paljastab elemendi röstsaia. Naaseb helistaja juurde enne, kui toosti on tegelikult näidatud (st enne `shown.bs.toast`sündmuse toimumist). Peate seda meetodit käsitsi kutsuma, selle asemel ei kuvata teie röstsaia.

Sündmused

Sündmus	Kirjeldus
`hide.bs.toast`	See sündmus käivitatakse kohe, kui `hide`eksemplari meetod on välja kutsutud.
`hidden.bs.toast`	See sündmus käivitatakse, kui röstsai on kasutaja eest varjatud.
`show.bs.toast`	See sündmus käivitub kohe, kui `show`eksemplari meetod kutsutakse.
`shown.bs.toast`	See sündmus käivitatakse, kui toost on kasutajale nähtavaks tehtud.

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