Tosts

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

Ar y dudalen hon

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:

Mae tost yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
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 arnom i gynnwys eich cynnwys “wedi'i dostio” ac rydym yn annog yn gryf botwm diswyddo.

Helo Byd! Neges dost yw hon.

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

Yn flaenorol, roedd ein sgriptiau'n ychwanegu'r .hidedosbarth yn ddeinamig i guddio tost yn llwyr (gyda display:none, yn hytrach na dim ond gyda opacity:0). Nid yw hyn bellach yn angenrheidiol. Fodd bynnag, ar gyfer cydweddoldeb tuag yn ôl, bydd ein sgript yn parhau i doglo'r dosbarth (er nad oes angen ymarferol amdani) tan y fersiwn fawr nesaf.

Esiampl fyw

Cliciwch y botwm isod i ddangos tost (wedi'i leoli gyda'n cyfleustodau yn y gornel dde isaf) sydd wedi'i guddio yn ddiofyn.

Hello, world! This is a toast message.

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

Rydym yn defnyddio'r JavaScript canlynol i sbarduno ein demo tost byw:

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

    toast.show()
  })
}

Tryleu

Mae tost ychydig yn dryloyw i gyd-fynd â'r hyn sydd oddi tanynt.

Helo Byd! Neges dost yw hon.

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

Pentyrru

Gallwch bentyrru tostau trwy eu lapio mewn cynhwysydd tost, a fydd yn ychwanegu rhywfaint o fylchau yn fertigol.

Gweler? Yn union fel hyn.

Ar y blaen, bydd tostiaid yn pentyrru'n awtomatig

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

Cynnwys personol

Addaswch eich llwncdestun trwy gael gwared ar is-gydrannau, eu tweacio â chyfleustodau , neu drwy ychwanegu eich marc eich hun. Yma rydym wedi creu tost symlach trwy gael gwared ar y rhagosodiad .toast-header, ychwanegu eicon cuddio arferol o Bootstrap Icons , a defnyddio rhai cyfleustodau flexbox i addasu'r cynllun.

Helo Byd! Neges dost yw hon.

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

Fel arall, gallwch hefyd ychwanegu rheolyddion a chydrannau ychwanegol at dostau.

Helo Byd! Neges dost yw hon.

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

Cynlluniau lliw

Gan adeiladu ar yr enghraifft uchod, gallwch greu gwahanol gynlluniau lliw tost gyda'n cyfleustodau lliw a chefndir . Yma rydym wedi ychwanegu .bg-primaryac .text-whiteat y .toast, ac yna ychwanegu .btn-close-whiteat ein botwm cau. I gael ymyl crisp, rydyn ni'n dileu'r ffin ddiofyn gyda .border-0.

Helo Byd! Neges dost yw hon.

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

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.

Helo Byd! Neges dost yw hon.

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

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

Gweler? Yn union fel hyn.

Ar y blaen, bydd tostiaid yn pentyrru'n awtomatig

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

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

Helo Byd! Neges dost yw hon.

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

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"er mwyn sicrhau bod y tost cyfan bob amser yn cael ei gyhoeddi fel un uned (atomig), yn hytrach na dim ond cyhoeddi'r hyn a newidiwyd (a allai arwain at broblemau os mai dim ond rhan o gynnwys y tost rydych chi'n ei ddiweddaru, neu os ydych chi'n arddangos yr un cynnwys tost yn nes ymlaen). 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 fel bod gan ddefnyddwyr ddigon o amser i ddarllen y tost.

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

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

Helo Byd! Neges dost yw hon.

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

Er ei bod yn dechnegol yn bosibl ychwanegu rheolyddion ffocws/gweithredu (fel botymau neu ddolenni ychwanegol) yn eich tost, dylech osgoi gwneud hyn ar gyfer cuddio tost yn awtomatig. Hyd yn oed os byddwch yn rhoi seibiant hir i'r delayllwncdestun , efallai y bydd defnyddwyr bysellfwrdd a thechnoleg gynorthwyol yn ei chael hi'n anodd cyrraedd y llwncdestun mewn pryd i weithredu (gan nad yw llwncdestun yn cael ffocws pan gânt eu harddangos). Os oes rhaid i chi gael rheolyddion pellach, rydym yn argymell defnyddio tost gyda autohide: false.

Sass

Newidynnau

$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($black, .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($black, .05);

Defnydd

Cychwyn llwncdestun trwy JavaScript:

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

Sbardunau

Gellir cyflawni diswyddiad gyda'r datapriodoledd ar fotwm o fewn y tost fel y dangosir isod:

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

neu ar fotwm y tu allan i'r tost gan ddefnyddio'r hyn a data-bs-targetddangosir isod:

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

Opsiynau

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

Enw	Math	Diofyn	Disgrifiad
`animation`	boolaidd	`true`	Cymhwyso trawsnewidiad pylu CSS i'r tost
`autohide`	boolaidd	`true`	Cuddiwch y tost yn awtomatig
`delay`	rhif	`5000`	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 .

dangos

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.

toast.show()

cuddio

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.

toast.hide()

gwared

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

toast.dispose()

caelInstance

Dull statig sy'n eich galluogi i gael yr enghraifft dost sy'n gysylltiedig ag elfen DOM

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

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft dost yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

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

Digwyddiadau

Math o ddigwyddiad	Disgrifiad
`show.bs.toast`	Mae'r digwyddiad hwn yn tanio ar unwaith pan `show`elwir y dull enghraifft.
`shown.bs.toast`	Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi'i wneud yn weladwy i'r defnyddiwr.
`hide.bs.toast`	Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y `hide`dull enghraifft wedi'i alw.
`hidden.bs.toast`	Mae'r digwyddiad hwn yn cael ei danio pan fydd y tost wedi gorffen cael ei guddio rhag y defnyddiwr.

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