Toasts

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.

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.

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

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.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const 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.

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

<div class="toast-container position-static">
  <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.

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

<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 .text-bg-primaryris 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.

<div class="toast align-items-center text-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.

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

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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.

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

<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/gnìomhach (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.

CSS

Caochlaidhean

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap a tha a’ fàs, bidh toasts a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .toastairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
  

caochladairean Sass

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Dòighean-obrach

Tachartasan

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