Source

Tosts

Gwthiwch hysbysiadau i'ch ymwelwyr gyda llwncdestun, neges rybuddio ysgafn y gellir ei haddasu'n hawdd.

Mae tosts yn hysbysiadau ysgafn sydd wedi'u cynllunio i ddynwared yr hysbysiadau gwthio sydd wedi'u poblogeiddio gan systemau gweithredu symudol a bwrdd gwaith. Maent wedi'u hadeiladu gyda flexbox, felly maent yn hawdd eu halinio a'u lleoli.

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn tost:

  • Os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .
  • Mae tost yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
  • Sylwch mai chi sy'n gyfrifol am leoli llwncdestun.
  • Bydd toasts yn cuddio'n awtomatig os nad ydych yn nodi autohide: false.

Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Enghreifftiau

Syml

Er mwyn annog tostau estynadwy a rhagweladwy, rydym yn argymell pennawd a chorff. Mae penawdau tost yn defnyddio display: flex, gan ganiatáu aliniad hawdd o gynnwys diolch i'n cyfleustodau ymyl a flexbox.

Mae tostau mor hyblyg ag sydd eu hangen arnoch ac ychydig iawn o farcio gofynnol sydd ganddynt. O leiaf, mae angen un elfen i gynnwys eich cynnwys “wedi'i dostio” ac rydym yn annog yn gryf botwm diswyddo.

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

Tryleu

Mae tostau ychydig yn dryloyw hefyd, felly maen nhw'n asio dros beth bynnag maen nhw'n ymddangos drosodd. Ar gyfer porwyr sy'n cefnogi'r backdrop-filtereiddo CSS, byddwn hefyd yn ceisio niwlio'r elfennau o dan dost.

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

Pentyrru

Pan fydd gennych nifer o dost, rydym yn rhagosod i'w pentyrru'n fertigol mewn modd darllenadwy.

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

Lleoliad

Rhowch dostau gyda CSS personol yn ôl yr angen. Defnyddir y dde uchaf yn aml ar gyfer hysbysiadau, fel y mae'r canol uchaf. Os mai dim ond un llwncdestun y byddwch chi'n ei ddangos ar y tro, rhowch yr arddulliau lleoli yn gywir ar y .toast.

Bootstrap 11 munud yn ôl
Helo Byd! Neges dost yw hon. 
<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>

Ar gyfer systemau sy'n cynhyrchu mwy o hysbysiadau, ystyriwch ddefnyddio elfen lapio fel y gallant bentyrru'n hawdd.

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

Gallwch hefyd ddod yn ffansi gyda chyfleustodau flexbox i alinio tostau yn llorweddol a / neu'n fertigol.

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

Hygyrchedd

Bwriedir i dostau fod yn ymyriadau bach i’ch ymwelwyr neu ddefnyddwyr, felly i helpu’r rhai sydd â darllenwyr sgrin a thechnolegau cynorthwyol tebyg, dylech lapio’ch llwncdestun mewn aria-liverhanbarth . Mae newidiadau i ranbarthau byw (fel chwistrellu/diweddaru cydran tost) yn cael eu cyhoeddi'n awtomatig gan ddarllenwyr sgrin heb fod angen symud ffocws y defnyddiwr neu dorri ar draws y defnyddiwr fel arall. Yn ogystal, cynhwyswch aria-atomic="true"sicrhau bod y tost cyfan bob amser yn cael ei gyhoeddi fel un uned (atomig), yn hytrach na chyhoeddi beth sydd wedi'i newid (a allai arwain at broblemau os mai dim ond rhan o gynnwys y tost y byddwch chi'n ei ddiweddaru, neu os ydych chi'n arddangos yr un cynnwys tost yn pwynt diweddarach mewn amser). Os yw'r wybodaeth sydd ei hangen yn bwysig ar gyfer y broses, ee ar gyfer rhestr o wallau ar ffurf, yna defnyddiwch y gydran rhybuddioyn lle tost.

Sylwch fod angen i'r rhanbarth byw fod yn bresennol yn y marcio cyn i'r tost gael ei gynhyrchu neu ei ddiweddaru. Os ydych chi'n cynhyrchu'r ddau yn ddeinamig ar yr un pryd ac yn eu chwistrellu i'r dudalen, yn gyffredinol ni fyddant yn cael eu cyhoeddi gan dechnolegau cynorthwyol.

Mae angen i chi hefyd addasu'r lefel rolea'r aria-livelefel yn dibynnu ar y cynnwys. Os yw'n neges bwysig fel gwall, defnyddiwch role="alert" aria-live="assertive", fel arall defnyddiwch role="status" aria-live="polite"briodoleddau.

Wrth i'r cynnwys rydych chi'n ei arddangos newid, gwnewch yn siŵr eich bod chi'n diweddaru'r delayterfyn amser i sicrhau bod gan bobl ddigon o amser i ddarllen y llwncdestun.

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

Wrth ddefnyddio autohide: false, rhaid i chi ychwanegu botwm cau i ganiatáu i ddefnyddwyr ddiystyru'r tost.

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

Ymddygiad JavaScript

Defnydd

Cychwyn llwncdestun trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-animation="".

Enw Math Diofyn Disgrifiad
animeiddiad boolaidd gwir Cymhwyso trawsnewidiad pylu CSS i'r tost
cuddio yn awtomatig boolaidd gwir Cuddiwch y tost yn awtomatig
oedi rhif 500 Oedi cuddio'r tost (ms)

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

$().toast(options)

Yn cysylltu triniwr tost wrth gasgliad elfennau.

.toast('show')

Yn datgelu llwncdestun elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei ddangos (hy cyn i'r shown.bs.toastdigwyddiad ddigwydd). Mae'n rhaid i chi alw'r dull hwn â llaw, yn lle hynny ni fydd eich tost yn dangos.

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

.toast('hide')

Yn cuddio tost elfen. Yn dychwelyd at y galwr cyn i'r tost gael ei guddio (hy cyn i'r hidden.bs.toastdigwyddiad ddigwydd). Mae'n rhaid i chi ffonio'r dull hwn â llaw os gwnaethoch wneud autohidehynny false.

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

.toast('dispose')

Yn cuddio tost elfen. Bydd eich tost yn aros ar y DOM ond ni fydd yn dangos mwyach.

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

Digwyddiadau

Math o Ddigwyddiad Disgrifiad
dangos.bs.tost Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangos.bs.tost Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi'i wneud yn weladwy i'r defnyddiwr.
tost.bs Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull enghraifft wedi'i alw.
tost.bs. cudd Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi gorffen cael ei guddio rhag y defnyddiwr. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})