Dagiti tosta

Dagiti toast ket nalag-an a pakaammo a nadisenio a mangtulad kadagiti push notification a pinalatak dagiti mobile ken desktop operating system. Naaramid dagitoy nga addaan iti flexbox, isu a nalaka nga i-align ken iposision dagitoy.

Panangkita iti pakabuklan

Dagiti banag nga ammuen no agusar iti toast plugin:

• Dagiti toast ket opt-in gapu kadagiti rason ti panagaramid, isu a masapul nga irugim a mismo dagitoy .
• Automatiko nga aglemmeng dagiti toast no saanmo nga ikeddeng ti autohide: false.

Dagiti pagarigan

Kadawyan

Tapno maparegta dagiti maipalawa ken maipadto a toast, irekomendarmi ti header ken bagi. Dagiti toast headers ket agusar display: flex, a mangipalubos ti nalaka a panagtunos ti linaon gapu kadagiti margin ken flexbox a utilidadmi.

Dagiti toast ket kasla nalaka a maibagay a kas iti kasapulam ken bassit unay ti kasapulan a markup-da. Iti kabassitan, kasapulanmi ti maymaysa nga elemento a naglaon iti “natoast” a linaonmo ken sibibileg nga iparegtami ti buton ti panangikkat.

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

Agbiag nga ulidan

I-click ti buton iti baba tapno maipakita ti toast (naiposision nga addaan kadagiti utilities-tayo iti baba a kannawan a suli) a nailemmeng babaen ti default.

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

Usarenmi ti sumaganad a JavaScript tapno mai-trigger ti live toast demo-mi:

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

    toast.show()
  })
}

Translucent nga

Medio translucent dagiti toast tapno mailaok iti adda iti baba dagitoy.

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

Panagtumpok

Mabalinmo ti agtumpok kadagiti toast babaen ti panangbalkot kadagita iti pagkargaan iti toast, a bertikal a mangnayon iti sumagmamano nga espasyo.

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

Kostumbre a linaon

Ipasayaatmo dagiti toast-mo babaen ti panangikkat kadagiti sub-component, panang-tweak kadagitoy babaen kadagiti utilities , wenno babaen ti pananginayon iti bukodmo a markup. Ditoy ket nangaramidkami ti nasimsimple a toast babaen ti panangikkat ti default .toast-header, pananginayon ti kostumbre nga ikono ti panaglemmeng manipud kadagiti Bootstrap Icons , ken panagusar ti sumagmamano a flexbox a utilidad tapno maitunos ti layout.

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

Saan laeng a dayta, mabalinmo met ti mangnayon kadagiti kanayonan a kontrol ken paset kadagiti toast.

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

Dagiti eskema ti kolor

Iti panangibangon iti pagarigan iti ngato, mabalinmo ti mangpartuat kadagiti nadumaduma nga eskema ti kolor ti toast babaen kadagiti utilidadmi iti kolor ken likudan . Ditoy nga innayonmi .text-bg-primaryti .toast, ken kalpasanna innayonmi .btn-close-whiteti close button-mi. Para iti narangrang nga igid, ikkatenmi ti default a beddeng babaen ti .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>

Panagplastar

Ikabil dagiti toast nga addaan iti custom CSS kas kasapulam dagitoy. Masansan a mausar ti ngato a kannawan para kadagiti pakaammo, kasta met ti makinngato a tengnga. No maysa laeng a toast ti ipakitam iti tunggal gundaway, ikabilmo a mismo dagiti estilo ti panangiposision iti .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>

Para kadagiti sistema a mangpataud kadagiti ad-adu a pakaammo, ibilang ti panagusar ti elemento ti panagbalkot tapno nalaka a makatumpokda.

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

Mabalinmo pay ti makagun-od iti magarbo kadagiti flexbox utilities tapno maitunos dagiti toast iti horizontal ken/wenno bertikal.

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

Ti pannakagun-od

Nairanta dagiti toast a babassit a pannakasinga dagiti bisita wenno agus-usar kenka, isu a tapno matulongam dagidiay addaan kadagiti screen reader ken umasping a makatulong a teknolohia, rumbeng a balutem dagiti toast-mo iti maysa a aria-liverehion . Dagiti panagbalbaliw kadagiti sibibiag a rehion (kas ti panangi-inject/panagpabaro ti maysa a paset ti toast) ket automatiko a maipakaammo babaen dagiti agbasbasa ti iskrin a saan a kasapulan a mangyakar ti pokus ti agar-aramat wenno iti sabali a wagas ket mangsinga ti agar-aramat. Mainayon pay, iraman aria-atomic="true"tapno masigurado a kanayon a maipakaammo ti intero a toast kas maymaysa (atomiko) a yunit, imbes nga ipakaammo laeng no ania ti nabaliwan (a mabalin nga agtungpal kadagiti parikut no i-update laeng ti paset ti linaon ti toast, wenno no mangipakpakita iti isu met laeng a linaon ti toast iti naud-udi a punto ti panawen). No ti impormasion a kasapulan ket napateg para iti proseso, kas pagarigan para iti listaan ​​dagiti biddut iti maysa a porma, kalpasanna usaren ti paset ti alertoimbes a toast.

Imutektekanyo a kasapulan nga adda ti live region iti markup sakbay a mapataud wenno ma-update ti toast. No dinamiko a mangpataudka nga agpada iti aggigiddan ken mangi-inject kadagitoy iti panid, dagitoy ket sapasap a saan a maipakaammo babaen dagiti makatulong a teknolohia.

Masapul met nga ibagaymo ti roleken aria-livelevel depende iti linaonna. No daytoy ket napateg a mensahe a kas ti biddut, usaren ti role="alert" aria-live="assertive", no saan ket agusar kadagiti role="status" aria-live="polite"attribute.

Bayat nga agbaliwbaliw ti linaon nga ipakpakitam, siguraduem nga i-update ti delaytimeout tapno adda umdas a tiempo dagiti agus-usar a mangbasa iti toast.

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

No usarem ti autohide: false, masapul nga inayonmo ti close button tapno mapalubosan dagiti agus-usar a mangilaksid iti toast.

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

Bayat a teknikal ket mabalin a manginayon kadagiti maipamaysa/maaramid a kontrol (kas kadagiti kanayonan a buton wenno silpo) iti toast-mo, rumbeng a liklikam nga aramiden daytoy para kadagiti autohiding a toast. Uray no ikkam ti toast iti napaut a delaytimeout , mabalin a marigatan dagiti agus-usar iti teklado ken makatulong a teknolohia a makadanon iti toast iti umiso a tiempo tapno agtignayda (yantangay dagiti toast ket saan nga umawat iti pokus no maiparang dagitoy). No talaga a masapul nga addaanka iti kanayonan a panangkontrol, irekomendarmi ti panangusar iti toast nga addaan iti autohide: false.

CSS nga

Dagiti Variable

Kas paset ti agbaliwbaliw nga asidegan dagiti CSS a variable ti Bootstrap, dagiti toast ket agus-usar itan kadagiti lokal a CSS a variable iti .toastpara iti napasayaat nga aktual nga oras a panagpasayaat. Dagiti pateg para kadagiti variable ti CSS ket naikeddeng babaen ti Sass, isu a ti panagpasayaat ti Sass ket nasuportaran pay laeng, met.

  --#{$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};
  

Sass dagiti variable

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

Panagusar

Irugi dagiti tosta babaen ti JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Dagiti mangtignay

Ti pannakaikkat ket mabalin a maragpat babaen ti dataattribute iti maysa a buton iti uneg ti toast a kas naipakita iti baba:

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

wenno iti maysa a buton iti ruar ti toast babaen ti panangusar iti data-bs-targetkas naipakita iti baba:

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

Dagiti Pagpilian

Kas dagiti pagpilian ket mabalin a maipasa babaen dagiti kababalin ti datos wenno JavaScript, mabalinmo nga inayon ti nagan ti pagpilian iti data-bs-, a kas iti data-bs-animation="{value}". Siguraduen a baliwan ti kita ti kaso ti nagan ti pagpilian manipud iti “ camelCase ” iti “ kebab-case ” no ipasa dagiti pagpilian babaen kadagiti kababalin ti datos. Kas pagarigan, usaren data-bs-custom-class="beautifier"imbes a data-bs-customClass="beautifier".

Manipud iti Bootstrap 5.2.0, amin a paset ket mangsuporta ti eksperimental a naireserba a kababalin ti datos data-bs-configa mabalin a mangbalay ti simple a panagisaad ti paset a kas ti kuerdas ti JSON. No ti maysa nga elemento ket addaan kadagiti data-bs-config='{"delay":0, "title":123}'ken data-bs-title="456"dagiti kababalin, ti maudi a titlepateg ket agbalinto 456ken dagiti naisina a kababalin ti datos ket mangbalbaliw kadagiti pateg a naited iti data-bs-config. Iti pay maipatinayon, dagiti addan a kababalin ti datos ket makabaelda a mangbalay kadagiti pateg ti JSON a kas ti data-bs-delay='{"show":0,"hide":150}'.

Dagiti Pamay-an

Dagiti Pasamak

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