Source

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>

Gegnsær

Ristað brauð eru líka örlítið hálfgagnsær, svo þau blandast saman við það sem þau gætu birst yfir. Fyrir vafra sem styðja backdrop-filterCSS eignina, munum við einnig reyna að þoka þættina undir ristuðu brauði.

<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="min-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 skaltu taka með aria-atomic="true"til að tryggja að allt ristað brauð sé alltaf tilkynnt sem ein (atóm) eining, frekar en að tilkynna hvað var breytt (sem gæti leitt til vandamála ef þú uppfærir aðeins hluta af innihaldi ristað brauðs, eða ef þú birtir sama ristað brauðið á seinna tímapunkti). 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 til að tryggja að fólk 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>

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ð
sjálffela 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 viðburðar Lýsing
sýna.bs.ristað brauð Þetta atvik 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ð Þessum atburði er skotið upp þegar búið er að fela ristað brauð fyrir notandanum. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})