Fara í aðalefni Farðu í skjalaleiðsögn
in English

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.

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

Lifa

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

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

Gegnsær

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

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

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

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

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

<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 við .bg-primaryog .text-whitevið .toast, og síðan bætt .btn-close-whitevið lokahnappinn okkar. Fyrir skörpum brún fjarlægjum við sjálfgefna ramma með .border-0.

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

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.

Bootstrap 11 mín síðan
Halló heimur! Þetta eru skál skilaboð. 
<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>

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

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

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

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

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

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:                1px;
$toast-border-color:                rgba(0, 0, 0, .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(0, 0, 0, .05);

Notkun

Frumstilla ristað brauð með JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-, eins og í data-bs-animation="".

Nafn Tegund Sjálfgefið Lýsing
animation Boolean true Notaðu CSS fade umskipti á ristað brauð
autohide Boolean true Fela ristað brauð sjálfkrafa
delay númer 5000 Seinkað að fela ristað brauð (ms)

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 .

sýna

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.toastatburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt, í staðinn mun ristað brauð þitt ekki birtast.

toast.show()

fela sig

Felur ristað brauð frumefnis. Snýr aftur til þess sem hringir áður en ristað brauð hefur verið falið (þ.e. áður en hidden.bs.toastatburðurinn á sér stað). Þú verður að kalla þessa aðferð handvirkt ef þú gerðir autohidetil false.

toast.hide()

farga

Felur ristað brauð frumefnis. Skálið þitt verður áfram á DOM en mun ekki birtast lengur.

toast.dispose()

getTilvik

Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni

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

getOrCreateInstance

Static aðferð sem gerir þér kleift að fá scrollspy tilvikið tengt DOM frumefni, eða búa til nýjan ef það var ekki frumstillt

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

Viðburðir

Tegund viðburðar Lýsing
show.bs.toast Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð.
shown.bs.toast Þessi atburður er skotinn þegar ristað brauð hefur verið gert sýnilegt notanda.
hide.bs.toast Þessi atburður er ræstur strax þegar hidetilviksaðferðin hefur verið kölluð.
hidden.bs.toast Þessi atburður er skotinn þegar ristað brauð hefur verið falið fyrir notandanum. 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})