Mga toast

Ang mga toast ay mga magaan na notification na idinisenyo upang gayahin ang mga push notification na pinasikat ng mga operating system ng mobile at desktop. Binuo ang mga ito gamit ang flexbox, kaya madaling ihanay at iposisyon ang mga ito.

Pangkalahatang-ideya

Mga bagay na dapat malaman kapag gumagamit ng toast plugin:

• Ang mga toast ay nag-opt-in para sa mga kadahilanan ng pagganap, kaya dapat mong simulan ang mga ito sa iyong sarili .
• Awtomatikong itatago ang mga toast kung hindi mo tinukoy autohide: false.

Mga halimbawa

Basic

Para hikayatin ang mga extensible at predictable toast, inirerekomenda namin ang isang header at body. Gumagamit ang mga header ng toast display: flex, na nagbibigay-daan sa madaling pag-align ng nilalaman salamat sa aming mga margin at flexbox utilities.

Ang mga toast ay nababaluktot gaya ng kailangan mo at may napakakaunting kinakailangang markup. Hindi bababa sa, kailangan namin ng isang elemento upang maglaman ng iyong "toasted" na nilalaman at mahigpit na hinihikayat ang isang pindutan na i-dismiss.

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

Live na halimbawa

I-click ang button sa ibaba para magpakita ng toast (nakaposisyon kasama ng aming mga utility sa kanang sulok sa ibaba) na nakatago bilang 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>

Ginagamit namin ang sumusunod na JavaScript upang ma-trigger ang aming live na toast demo:

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

    toast.show()
  })
}

Translucent

Ang mga toast ay bahagyang translucent upang ihalo sa kung ano ang nasa ibaba nito.

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

Nakasalansan

Maaari mong i-stack ang mga toast sa pamamagitan ng pagbalot sa mga ito sa isang toast container, na patayo na magdaragdag ng ilang 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>

Custom na nilalaman

I-customize ang iyong mga toast sa pamamagitan ng pag-alis ng mga sub-components, pagsasaayos ng mga ito gamit ang mga utility , o sa pamamagitan ng pagdaragdag ng sarili mong markup. Dito nakagawa kami ng mas simpleng toast sa pamamagitan ng pag-alis ng default .toast-header, pagdaragdag ng custom na icon ng itago mula sa Bootstrap Icons , at paggamit ng ilang flexbox utilities upang ayusin ang 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>

Bilang kahalili, maaari ka ring magdagdag ng mga karagdagang kontrol at bahagi sa mga 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>

Mga scheme ng kulay

Batay sa halimbawa sa itaas, maaari kang lumikha ng iba't ibang mga scheme ng kulay ng toast gamit ang aming mga gamit sa kulay at background . Dito kami nagdagdag .text-bg-primarysa .toast, at pagkatapos ay idinagdag .btn-close-whitesa aming close button. Para sa isang malutong na gilid, inaalis namin ang default na hangganan na may .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>

Paglalagay

Maglagay ng mga toast gamit ang custom na CSS kung kailangan mo ang mga ito. Ang kanang itaas ay kadalasang ginagamit para sa mga notification, gayundin ang itaas na gitna. Kung magpapakita ka lang ng isang toast sa isang pagkakataon, ilagay ang mga istilo ng pagpoposisyon sa kanan .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 sa mga system na bumubuo ng higit pang mga notification, isaalang-alang ang paggamit ng isang elemento ng pambalot upang madali silang mag-stack.

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

Maaari ka ring magpahanga sa mga utility ng flexbox upang ihanay ang mga toast nang pahalang at/o patayo.

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

Accessibility

Ang mga toast ay nilayon na maging maliliit na abala sa iyong mga bisita o user, kaya para matulungan ang mga may screen reader at katulad na mga pantulong na teknolohiya, dapat mong ibalot ang iyong mga toast sa isang aria-liverehiyon . Ang mga pagbabago sa mga live na rehiyon (tulad ng pag-iniksyon/pag-update ng bahagi ng toast) ay awtomatikong inanunsyo ng mga screen reader nang hindi kailangang ilipat ang focus ng user o kung hindi man ay matakpan ang user. Bukod pa rito, isama aria-atomic="true"upang matiyak na ang buong toast ay palaging inaanunsyo bilang isang unit (atomic), sa halip na ipahayag lamang kung ano ang nabago (na maaaring humantong sa mga problema kung i-update mo lamang ang bahagi ng nilalaman ng toast, o kung ipinapakita ang parehong nilalaman ng toast sa ibang pagkakataon). Kung ang impormasyong kailangan ay mahalaga para sa proseso, hal para sa isang listahan ng mga error sa isang form, pagkatapos ay gamitin ang alertong bahagisa halip na toast.

Tandaan na ang live na rehiyon ay kailangang naroroon sa markup bago mabuo o ma-update ang toast. Kung dynamic mong bubuo ang pareho sa parehong oras at i-inject ang mga ito sa page, sa pangkalahatan ay hindi ito iaanunsyo ng mga pantulong na teknolohiya.

Kailangan mo ring iakma ang roleat aria-liveantas depende sa nilalaman. Kung ito ay isang mahalagang mensahe tulad ng isang error, gamitin ang role="alert" aria-live="assertive", kung hindi man ay gumamit ng mga role="status" aria-live="polite"katangian.

Habang nagbabago ang content na ipinapakita mo, tiyaking i-update ang delaytimeout para magkaroon ng sapat na oras ang mga user para basahin ang 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>

Kapag ginagamit autohide: falseang , dapat kang magdagdag ng close button upang payagan ang mga user na i-dismiss ang 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>

Bagama't teknikal na posibleng magdagdag ng mga natutuon/naaaksyunan na kontrol (tulad ng mga karagdagang button o link) sa iyong toast, dapat mong iwasang gawin ito para sa pag-autohid ng mga toast. Kahit na bigyan mo ng mahabang delaytimeout ang toast , maaaring mahirapan ang mga gumagamit ng keyboard at assistive na teknolohiya na abutin ang toast sa oras upang kumilos (dahil ang mga toast ay hindi nakakatanggap ng focus kapag ipinakita ang mga ito). Kung talagang dapat kang magkaroon ng karagdagang mga kontrol, inirerekomenda namin ang paggamit ng toast na may autohide: false.

CSS

Mga variable

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga toast ang mga lokal na variable ng CSS .toastpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

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

Paggamit

Magsimula ng mga toast sa pamamagitan ng JavaScript:

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

Mga nag-trigger

Maaaring makamit ang pagpapaalis gamit ang dataattribute sa isang button sa loob ng toast gaya ng ipinapakita sa ibaba:

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

o sa isang button sa labas ng toast gamit ang data-bs-targettulad ng ipinapakita sa ibaba:

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

Mga pagpipilian

Dahil maaaring maipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript, maaari kang magdagdag ng pangalan ng opsyon sa data-bs-, tulad ng sa data-bs-animation="{value}". Siguraduhing baguhin ang uri ng case ng pangalan ng opsyon mula sa " camelCase " sa " kebab-case " kapag ipinapasa ang mga opsyon sa pamamagitan ng mga katangian ng data. Halimbawa, gamitin data-bs-custom-class="beautifier"sa halip na data-bs-customClass="beautifier".

Mula sa Bootstrap 5.2.0, sinusuportahan ng lahat ng mga bahagi ang isang pang- eksperimentong nakalaan na katangian ng data data-bs-configna maaaring maglagay ng simpleng configuration ng bahagi bilang isang string ng JSON. Kapag ang isang elemento ay may data-bs-config='{"delay":0, "title":123}'at data-bs-title="456"mga katangian, ang huling titlehalaga ay magiging 456at ang hiwalay na mga katangian ng data ay mag-o-override sa mga halagang ibinigay sa data-bs-config. Bilang karagdagan, ang mga kasalukuyang katangian ng data ay nakakapaglagay ng mga halaga ng JSON tulad ng data-bs-delay='{"show":0,"hide":150}'.

Paraan

Mga kaganapan

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