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.

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:

  • Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .
  • Ristað brauð eru valin af frammistöðuástæðum, svo þú verður að frumstilla þau sjálfur .
  • Vinsamlegast athugaðu að þú ert ábyrgur fyrir staðsetningu ristað brauð.
  • 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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stafla

Þegar þú ert með mörg ristað brauð, þá erum við sjálfgefið að stafla þeim lóðrétt á læsilegan hátt.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </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ð. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </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" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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.

JavaScript hegðun

Notkun

Frumstilla ristað brauð með JavaScript:

$('.toast').toast(option)

Valmöguleikar

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

Nafn Tegund Sjálfgefið Lýsing
fjör Boolean satt Notaðu CSS fade umskipti á ristað brauð
fela sjálfkrafa Boolean satt Fela ristað brauð sjálfkrafa
seinkun númer 500 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 .

$().toast(options)

Hengir ristuðu brauði við frumefnasafn.

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

$('#element').toast('show')

.toast('hide')

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.

$('#element').toast('hide')

.toast('dispose')

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

$('#element').toast('dispose')

Viðburðir

Tegund atburðar Lýsing
sýna.bs.ristað brauð Þessi atburður ræsir strax þegar showtilviksaðferðin er kölluð.
sýnt.bs.ristað brauð Þessi atburður er skotinn þegar ristað brauð hefur verið gert sýnilegt notanda.
fela.bs.ristað brauð Þessi atburður er ræstur strax þegar hidetilviksaðferðin hefur verið kölluð.
falið.bs.ristað brauð Þessi atburður er skotinn þegar ristað brauð hefur verið falið fyrir notandanum. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})