Ristað brauð

Ýttu tilkynningum til gesta þinna með ristuðu brauði, léttum og auðvelt að sérsníða viðvörunarskilaboðum.

Á þessari síðu

Ristað brauð eru léttar tilkynningar sem eru hannaðar til að líkja eftir ýtitilkynningum sem hafa verið vinsælar af farsíma- og tölvustýrikerfum. Þau eru byggð með flexbox, svo auðvelt er að stilla þau og staðsetja.

Yfirlit

Hlutir sem þarf að vita þegar þú notar ristuðu brauðbæti:

Ristað brauð eru valin af frammistöðuástæðum, svo þú verður að frumstilla þau sjálfur .
Ristað brauð mun sjálfkrafa fela sig ef þú tilgreinir ekki autohide: false.

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

Dæmi

Basic

Til að hvetja til teygjanlegra og fyrirsjáanlegra ristuðu brauða mælum við með haus og meginmáli. Ristað brauðhausar nota display: flex, sem gerir auðvelt að stilla efni þökk sé spássíu og flexbox tólum okkar.

Ristað brauð eru eins sveigjanleg og þú þarft og hafa mjög litla álagningu. Að minnsta kosti krefjumst við þess að einn þáttur innihaldi „ristað“ efnið þitt og hvetjum eindregið til að hafna hnappinn.

Halló heimur! Þetta eru skál skilaboð.

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>

Áður bættu forskriftirnar okkar .hidebekknum á virkan hátt til að fela ristað brauð (með display:none, frekar en bara með opacity:0). Þetta þarf nú ekki lengur. Hins vegar, fyrir afturábak eindrægni, mun handritið okkar halda áfram að skipta um bekk (jafnvel þó að það sé engin hagnýt þörf fyrir það) þar til í næstu stóru útgáfu.

Lifandi dæmi

Smelltu á hnappinn hér að neðan til að sýna ristað brauð (staðsett með tólunum okkar í neðra hægra horninu) sem hefur verið falið sjálfgefið.

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>

Við notum eftirfarandi JavaScript til að koma af stað kynningu á lifandi brauði:

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

    toast.show()
  })
}

Gegnsær

Ristað brauð eru örlítið hálfgagnsær til að blandast saman við það sem er fyrir neðan þau.

Halló heimur! Þetta eru skál skilaboð.

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>

Stafla

Þú getur stafla ristuðu brauði með því að pakka þeim inn í ristuðu brauðílát, sem mun lóðrétt bæta við smá bili.

Sjáðu? Bara svona.

Athugið að ristað brauð staflast sjálfkrafa

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>

Sérsniðið efni

Sérsníddu ristað brauð með því að fjarlægja undirhluti, fínstilla þá með tólum eða með því að bæta við þinni eigin merkingu. Hér höfum við búið til einfaldara ristað brauð með því að fjarlægja sjálfgefið .toast-header, bæta við sérsniðnu felu tákni frá Bootstrap Icons og nota nokkur flexbox tól til að stilla útlitið.

Halló heimur! Þetta eru skál skilaboð.

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>

Að öðrum kosti geturðu einnig bætt við viðbótarstýringum og íhlutum við ristað brauð.

Halló heimur! Þetta eru skál skilaboð.

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>

Litasamsetning

Byggt á dæminu hér að ofan geturðu búið til mismunandi litasamsetningu ristað brauð með lita- og bakgrunnstækjum okkar . Hér höfum við bætt .text-bg-primaryvið .toast, og síðan bætt .btn-close-whitevið lokunarhnappinn okkar. Fyrir skörpum brún fjarlægjum við sjálfgefna ramma með .border-0.

Halló heimur! Þetta eru skál skilaboð.

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>

Staðsetning

Settu ristað brauð með sérsniðnum CSS eins og þú þarft á þeim að halda. Efst til hægri er oft notað fyrir tilkynningar, sem og efst í miðjunni. Ef þú ætlar bara alltaf að sýna eitt ristað brauð í einu skaltu setja staðsetningarstílana beint á .toast.

Halló heimur! Þetta eru skál skilaboð.

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>

Fyrir kerfi sem búa til fleiri tilkynningar skaltu íhuga að nota umbúðir svo þau geti auðveldlega staflað.

Sjáðu? Bara svona.

Athugið að ristað brauð staflast sjálfkrafa

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>

Þú getur líka orðið flottur með flexbox tólum til að stilla ristuðu brauði lárétt og/eða lóðrétt.

Halló heimur! Þetta eru skál skilaboð.

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>

Aðgengi

Skál er ætlað að vera litlar truflanir fyrir gesti þína eða notendur, svo til að hjálpa þeim sem eru með skjálesara og svipaða hjálpartækni, ættir þú að vefja ristuðu brauði á aria-livesvæði . Breytingar á lifandi svæðum (eins og að sprauta inn/uppfæra ristað brauðhluti) eru sjálfkrafa tilkynntar af skjálesendum án þess að þurfa að færa fókus notandans eða trufla notandann á annan hátt. Að auki, hafðu með aria-atomic="true"til að tryggja að allt ristað brauð sé alltaf tilkynnt sem ein (atóm) eining, frekar en að tilkynna bara hvað var breytt (sem gæti leitt til vandamála ef þú uppfærir aðeins hluta af innihaldi brauðsins, eða ef þú birtir sama ristað brauðið. síðar). Ef nauðsynlegar upplýsingar eru mikilvægar fyrir ferlið, td fyrir lista yfir villur í eyðublaði, notaðu þá viðvörunarhlutanní staðinn fyrir ristað brauð.

Athugaðu að lifandi svæðið þarf að vera til staðar í merkingunni áður en ristað brauð er búið til eða uppfært. Ef þú býrð til bæði á sama tíma og dælir þeim inn á síðuna, verða þau almennt ekki tilkynnt með hjálpartækjum.

Þú þarft líka að aðlaga roleog aria-livestig eftir innihaldi. Ef það eru mikilvæg skilaboð eins og villa, notaðu role="alert" aria-live="assertive", annars notaðu role="status" aria-live="polite"eiginleika.

Þar sem efnið sem þú ert að sýna breytist, vertu viss um að uppfæra delaytímamörkin þannig að notendur hafi nægan tíma til að lesa ristað brauð.

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

Þegar þú notar autohide: falseverður þú að bæta við lokunarhnappi til að leyfa notendum að hafna ristað brauð.

Halló heimur! Þetta eru skál skilaboð.

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>

Þó að tæknilega sé mögulegt að bæta við stillanlegum/virkum stjórntækjum (svo sem viðbótarhnöppum eða tenglum) í ristuðu brauði, ættir þú að forðast að gera þetta til að fela ristuðu brauði sjálfkrafa. Jafnvel ef þú gefur ristað brauði langan delaytíma , gætu notendur lyklaborðs og hjálpartækja átt erfitt með að ná ristað brauði í tæka tíð til að grípa til aðgerða (þar sem ristað brauð fá ekki fókus þegar þau eru birt). Ef þú verður að hafa frekari stjórntæki, mælum við með að þú notir ristað brauð með autohide: false.

CSS

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, nota ristað brauð nú staðbundnar CSS breytur á .toasttil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

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

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

Notkun

Frumstilla ristað brauð með JavaScript:

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

Kveikjur

Hægt er að fá brottvísun með dataeigindinni á hnappi í ristuðu brauðinu eins og sýnt er hér að neðan:

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

eða á hnapp fyrir utan ristað brauð með því að nota data-bs-targeteins og sýnt er hér að neðan:

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

Valmöguleikar

Þar sem hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript geturðu bætt valkostsheiti við data-bs-, eins og í data-bs-animation="{value}". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr " camelCase " í " kebab-case " þegar þú sendir valkostina í gegnum gagnaeiginleika. Notaðu til dæmis data-bs-custom-class="beautifier"í staðinn fyrir data-bs-customClass="beautifier".

Frá og með Bootstrap 5.2.0 styðja allir íhlutir tilrauna frátekinn gagnaeiginleika data-bs-configsem getur hýst einfalda íhlutastillingu sem JSON streng. Þegar eining hefur data-bs-config='{"delay":0, "title":123}'og eiginleika verður data-bs-title="456"lokagildið og aðskildu gagnaeiginirnar munu hnekkja gildum sem gefin eru á . Að auki geta núverandi gagnaeiginleikar hýst JSON gildi eins og .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Nafn	Tegund	Sjálfgefið	Lýsing
`animation`	Boolean	`true`	Notaðu CSS fade umskipti á ristað brauð.
`autohide`	Boolean	`true`	Fela ristað brauð sjálfkrafa eftir seinkunina.
`delay`	númer	`5000`	Töf í millisekúndum áður en ristað brauð er falið.

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar .

Aðferð	Lýsing
`dispose`	Felur ristað brauð frumefnis. Skálið þitt verður áfram á DOM en mun ekki birtast lengur.
`getInstance`	Statísk aðferð sem gerir þér kleift að fá ristuðu brauðtilvikið tengt DOM frumefni. Til dæmis: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Skilar Bootstrap toast dæmi.
`getOrCreateInstance`	Static aðferð sem gerir þér kleift að fá ristuðu brauðtilvikið tengt DOM frumefni, eða búa til nýjan, ef það var ekki frumstillt. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Skilar Bootstrap toast dæmi.
`hide`	Felur ristað brauð frumefnis. Snýr aftur til þess sem hringir áður en ristað brauð hefur verið falið (þ.e. áður en `hidden.bs.toast`atburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt ef þú gerðir `autohide`til `false`.
`isShown`	Skilar Boole-gildi samkvæmt sýnileikastöðu brauðsins.
`show`	Sýnir ristað brauð frumefnis. Snýr aftur til þess sem hringir áður en ristað brauð hefur verið sýnt (þ.e. áður en `shown.bs.toast`atburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt, í staðinn mun ristað brauð þitt ekki birtast.

Viðburðir

Viðburður	Lýsing
`hide.bs.toast`	Þessi atburður er ræstur strax þegar `hide`tilviksaðferðin hefur verið kölluð.
`hidden.bs.toast`	Þessi atburður er skotinn þegar ristað brauð hefur verið falið fyrir notandanum.
`show.bs.toast`	Þessi atburður ræsir strax þegar `show`tilviksaðferðin er kölluð.
`shown.bs.toast`	Þessi atburður er skotinn þegar ristað brauð hefur verið gert sýnilegt notanda.

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