Toasts

Brùth sanasan don luchd-tadhail agad le toast, teachdaireachd rabhaidh aotrom agus furasta a ghnàthachadh.

Air an duilleig seo

Is e brathan aotrom a th’ ann an toasts a chaidh a dhealbhadh gus atharrais air na fiosan putaidh a tha air a bhith mòr-chòrdte le siostaman obrachaidh gluasadach is deasg. Tha iad air an togail le flexbox, agus mar sin tha iad furasta an co-thaobhadh agus an suidheachadh.

Ro-shealladh

Rudan ri fios nuair a bhios tu a’ cleachdadh am plugan toast:

Tha toasts nan tarraing a-steach airson adhbharan dèanadais, agus mar sin feumaidh tu iad fhèin a thòiseachadh .
Falaichidh toasts gu fèin-ghluasadach mura sònraich thu autohide: false.

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Eisimpleirean

Bunaiteach

Gus toasts leudachail agus ro-innseach a bhrosnachadh, tha sinn a’ moladh bann-cinn agus bodhaig. Bidh cinn-cinn toast a’ cleachdadh display: flex, a’ ceadachadh susbaint a cho-thaobhadh gu furasta le taing dha na goireasan iomaill agus bogsa flex againn.

Tha toasts cho sùbailte ‘s a dh’ fheumas tu agus chan eil ach glè bheag de chomharradh a dhìth orra. Aig a’ char as lugha, feumaidh sinn aon eileamaid gus an t-susbaint “toastte” agad a chumail agus brosnaichidh sinn gu làidir putan cuir às.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Roimhe sin, chuir na sgriobtaichean againn ris a’ .hidechlas gu dinamach gus toast fhalach gu tur (le display:none, seach dìreach le opacity:0). Chan eil seo riatanach tuilleadh. Ach, airson co-chòrdalachd air ais, leanaidh an sgriobt againn a’ togail a’ chlas (ged nach eil feum pragtaigeach sam bith air) gus an ath dhreach mòr.

Eisimpleir beò

Cliog air a’ phutan gu h-ìosal gus toast a shealltainn (suidhichte leis na goireasan againn san oisean gu h-ìosal air an làimh dheis) a chaidh fhalach gu bunaiteach.

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>

Bidh sinn a’ cleachdadh an JavaScript a leanas gus an demo toast beò againn a bhrosnachadh:

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

    toast.show()
  })
}

Tar-shoilleir

Tha toasts beagan tar-shoilleir airson a bhith a’ measgachadh leis na tha gu h-ìosal.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

A' cruachadh

Faodaidh tu toasts a chruachadh le bhith gan pasgadh ann an soitheach toast, a chuireas beagan beàrn ris gu dìreach.

Faic? Dìreach mar seo.

Ceann suas, cruinnichidh toasts gu fèin-ghluasadach

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

Susbaint gnàthaichte

Gnàthaich na toasts agad le bhith a’ toirt air falbh fo-phàirtean, gan tweaking le goireasan , no le bhith a’ cur do chomharra fhèin ris. An seo tha sinn air toast nas sìmplidh a chruthachadh le bhith a’ toirt air falbh an rud bunaiteach .toast-header, a’ cur ìomhaigh falaich àbhaisteach bho Bootstrap Icons , agus a’ cleachdadh cuid de ghoireasan flexbox gus an cruth atharrachadh.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Air an làimh eile, faodaidh tu cuideachd smachdan agus co-phàirtean a bharrachd a chur ri toasts.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Sgeama dathan

A’ togail air an eisimpleir gu h-àrd, faodaidh tu diofar sgeamaichean dath toast a chruthachadh leis na goireasan dath is cùl -fhiosrachaidh againn . An seo tha sinn air cur ris .bg-primaryagus .text-whiteris an .toast, agus an uairsin air a chuir ris .btn-close-whitea’ phutan dlùth againn. Airson oir crùbach, bheir sinn air falbh a’ chrìoch àbhaisteach le .border-0.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Suidheachadh

Cuir toasts le CSS àbhaisteach mar a dh ’fheumas tu iad. Tha an taobh deas gu h-àrd air a chleachdadh gu tric airson fiosan, mar a tha am meadhan gu h-àrd. Mura h-eil thu a’ dol a shealltainn ach aon toast aig an aon àm, cuir na stoidhlichean suidheachaidh ceart air an .toast.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Airson siostaman a ghineas barrachd fiosan, smaoinich air a bhith a’ cleachdadh eileamaid còmhdaich gus an urrainn dhaibh cruachadh gu furasta.

Faic? Dìreach mar seo.

Ceann suas, cruinnichidh toasts gu fèin-ghluasadach

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

Faodaidh tu cuideachd a bhith sùbailte le goireasan flexbox gus toasts a cho-thaobhadh gu còmhnard agus / no gu dìreach.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Ruigsinneachd

Thathas ag amas air toasts a bhith nam briseadh beag air an luchd-tadhail no an luchd-cleachdaidh agad, agus mar sin gus an fheadhainn aig a bheil leughadairean sgrion agus teicneòlasan cuideachaidh coltach ris a chuideachadh, bu chòir dhut do bhiadhan a phasgadh ann an aria-livesgìre . Bidh atharrachaidhean air roinnean beò (leithid stealladh / ùrachadh pàirt toast) air an ainmeachadh gu fèin-ghluasadach le leughadairean sgrion gun a bhith feumach air fòcas an neach-cleachdaidh a ghluasad no stad a chuir air an neach-cleachdaidh. A bharrachd air an sin, thoir a-steach aria-atomic="true"dèanamh cinnteach gu bheil an toast gu lèir an-còmhnaidh air ainmeachadh mar aonad singilte (atamach), an àite a bhith dìreach ag ainmeachadh na chaidh atharrachadh (a dh’ fhaodadh duilgheadasan adhbhrachadh mura h-ùraich thu ach pàirt de shusbaint an toast, no ma sheallas tu an aon stuth toast aig àm nas fhaide air adhart). Ma tha am fiosrachadh a tha a dhìth cudromach airson a’ phròiseis, me airson liosta mhearachdan ann an cruth, cleachd am pàirt rabhaidhan àite toast.

Thoir an aire gum feum an roinn bheò a bhith an làthair anns a’ chomharra mus tèid an toast a chruthachadh no ùrachadh. Ma ghineas tu an dà chuid gu dinamach aig an aon àm agus gan stealladh a-steach don duilleag, mar as trice cha bhith iad air an ainmeachadh le teicneòlasan taice.

Feumaidh tu cuideachd an ìre roleagus an aria-liveìre atharrachadh a rèir an t-susbaint. Mas e teachdaireachd chudromach a th’ ann leithid mearachd, cleachd role="alert" aria-live="assertive", air neo cleachd role="status" aria-live="polite"buadhan.

Mar a bhios an susbaint a tha thu a’ taisbeanadh ag atharrachadh, dèan cinnteach gun ùraich thu an delayùine a-mach gus am bi ùine gu leòr aig luchd-cleachdaidh an toast a leughadh.

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

Nuair a bhios tu a’ cleachdadh autohide: false, feumaidh tu putan dùin a chuir ris gus leigeil le luchd-cleachdaidh an toast a chuir às.

Hàlo a Shaoghail! Is e teachdaireachd toast a tha seo.

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

Ged a tha e comasach gu teicneòlach smachdan cuimseach/obrachail (leithid putanan no ceanglaichean a bharrachd) a chur ris a’ bhiadh agad, bu chòir dhut seo a sheachnadh airson a bhith a’ falach toasts gu fèin-ghluasadach. Eadhon ged a bheir thu delayùine fhada don toast , dh’ fhaodadh gum bi e duilich do luchd-cleachdaidh meur-chlàr agus teicneòlas cuideachaidh an toast a ruighinn ann an àm airson a dhol an gnìomh (leis nach faigh toasts fòcas nuair a thèid an taisbeanadh). Ma dh’ fheumas tuilleadh smachdan a bhith agad, tha sinn a’ moladh gun cleachd thu toast le autohide: false.

Sass

Caochlaidhean

$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);

Cleachdadh

Tòisich toasts tro JavaScript:

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

Luchd-brosnachaidh

Faodar cur às a dhreuchd leis a’ datafheart air putan taobh a-staigh an toast mar a chithear gu h-ìosal:

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

no air putan taobh a-muigh an toast a’ cleachdadh data-bs-targetmar a chithear gu h-ìosal:

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

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-, mar ann an data-bs-animation="".

Ainm	Seòrsa	Deònach	Tuairisgeul
`animation`	boolean	`true`	Cuir a-steach eadar-ghluasad caol CSS chun toast
`autohide`	boolean	`true`	Falaich an toast gu fèin-ghluasadach
`delay`	àireamh	`5000`	Moill a’ falach an toast (ms)

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

seall

A’ nochdadh toast eileamaid. Tilleadh chun neach-fios mus deach an toast a shealltainn (ie mus tachair an shown.bs.toasttachartas). Feumaidh tu an dòigh seo a ghairm le làimh, an àite sin cha nochd an toast agad.

toast.show()

seiche

A’ falach toast eileamaid. Tilleadh chun neach-fios mus bi an toast falaichte (ie mus tachair an hidden.bs.toasttachartas). Feumaidh tu an dòigh seo a ghairm le làimh ma rinn autohidethu false.

toast.hide()

cuidhteas

A’ falach toast eileamaid. Fuirichidh an toast agad air an DOM ach cha nochd e tuilleadh.

toast.dispose()

faighinn a-steach

Modh statach a leigeas leat an eisimpleir toast fhaighinn co-cheangailte ri eileamaid DOM

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

faighOrCreateInstance

Dòigh statach a leigeas leat an eisimpleir toast fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh

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

Tachartasan

Seòrsa tachartas	Tuairisgeul
`show.bs.toast`	Bidh an tachartas seo a’ losgadh sa bhad nuair `show`a chanar ris an dòigh eisimpleir.
`shown.bs.toast`	Thèid an tachartas seo a losgadh nuair a bhios an toast ri fhaicinn don neach-cleachdaidh.
`hide.bs.toast`	Thèid an tachartas seo a losgadh sa bhad nuair a chaidh an `hide`dòigh eisimpleir a ghairm.
`hidden.bs.toast`	Thèid an tachartas seo a losgadh nuair a tha an toast deiseil airson a bhith falaichte bhon chleachdaiche.

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