Mga toast

Ang mga toast kay gaan nga mga abiso nga gidesinyo sa pagsundog sa mga abiso sa pagduso nga gipasikat sa mga operating system sa mobile ug desktop. Gitukod kini gamit ang flexbox, mao nga dali kini nga i-align ug posisyon.

Overview

Mga butang nga mahibal-an kung gamiton ang toast plugin:

• Ang mga toast gi-opt-in tungod sa mga hinungdan sa performance, mao nga ikaw mismo ang mag-initialize niini .
• Awtomatikong itago ang mga toast kung dili nimo isulti autohide: false.

Mga pananglitan

sukaranan

Aron madasig ang mapalapad ug matag-an nga mga toast, among girekomenda ang usa ka header ug lawas. Ang mga ulohan sa toast gigamit display: flex, nga nagtugot sa dali nga pag-align sa sulud salamat sa among margin ug flexbox nga mga gamit.

Ang mga toast kay flexible sama sa imong gikinahanglan ug gamay ra kaayo ang gikinahanglang markup. Sa labing gamay, nanginahanglan kami usa ka elemento nga adunay sulud sa imong "toasted" nga sulud ug kusganon nga gidasig ang usa ka butones nga 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 nga ehemplo

I-klik ang buton sa ubos aron ipakita ang usa ka toast (nabutang sa among mga utilities sa ubos nga tuo nga suok) nga gitago sa 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>

Gigamit namo ang mosunod nga JavaScript aron ma-trigger ang among live 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 medyo translucent aron masagol sa kung unsa ang naa sa ubos niini.

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

Pagtapok

Mahimo nimong i-stack ang mga toast pinaagi sa pagputos niini sa usa ka sudlanan sa toast, nga makadugang sa pipila ka gilay-on.

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

Ipasibo ang imong mga toast pinaagi sa pagtangtang sa mga sub-sangkap, pag-tweak niini gamit ang mga utilities , o pinaagi sa pagdugang sa imong kaugalingon nga marka. Dinhi naghimo kami og usa ka mas simple nga toast pinaagi sa pagtangtang sa default .toast-header, pagdugang og custom hide icon gikan sa Bootstrap Icons , ug paggamit sa pipila ka flexbox utilities aron ma-adjust 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>

Sa laing bahin, mahimo ka usab makadugang dugang nga mga kontrol ug sangkap 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 laraw sa kolor

Pagtukod sa panig-ingnan sa ibabaw, makahimo ka og lain-laing mga laraw sa kolor sa toast gamit ang among mga gamit sa kolor ug background . Dinhi among gidugang .text-bg-primaryang .toast, ug dayon gidugang .btn-close-whitesa among close button. Alang sa usa ka presko nga ngilit, among tangtangon ang default nga utlanan sa .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>

Pagpahimutang

Ibutang ang mga toast nga adunay naandan nga CSS kung kinahanglan nimo kini. Ang taas nga tuo kanunay nga gigamit alang sa mga pahibalo, sama sa taas nga tunga. Kung magpakita ka lang ug usa ka toast matag higayon, ibutang ang mga istilo sa pagpoposisyon diha mismo sa .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>

Alang sa mga sistema nga makamugna og dugang nga mga abiso, ikonsiderar ang paggamit sa usa ka elemento sa pagputos aron kini dali nga ma-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>

Mahimo ka usab madani sa mga gamit sa flexbox aron ipahiangay ang mga toast nga pinahigda ug / o patindog.

<!-- 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 gituyo aron mahimong gamay nga paghunong sa imong mga bisita o tiggamit, busa aron matabangan kadtong adunay mga screen reader ug parehas nga mga teknolohiya sa pagtabang, kinahanglan nimo nga ibalot ang imong mga toast sa usa ka aria-liverehiyon . Ang mga pagbag-o sa mga buhi nga rehiyon (sama sa pag-inject/pag-update sa usa ka bahin sa toast) awtomatik nga gipahibalo sa mga magbabasa sa screen nga dili kinahanglan nga ibalhin ang pokus sa gumagamit o kung dili makabalda sa tiggamit. Dugang pa, ilakip aria-atomic="true"aron masiguro nga ang tibuok nga toast kanunay nga gipahibalo isip usa ka (atomic) nga yunit, imbes nga ipahibalo lang kung unsa ang nabag-o (nga mahimong mosangpot sa mga problema kung imong i-update ang bahin sa sulod sa toast, o kung magpakita sa samang sulod sa toast. sa ulahi nga punto sa panahon). Kung ang impormasyon nga gikinahanglan importante alang sa proseso, pananglitan sa listahan sa mga sayop sa usa ka porma, unya gamita ang alert componentimbes nga toast.

Timan-i nga ang buhi nga rehiyon kinahanglan nga anaa sa markup sa dili pa ang toast namugna o updated. Kung dinamikong imong gimugna ang duha sa parehas nga oras ug gi-inject kini sa panid, kasagaran dili kini ipahibalo sa mga teknolohiya nga makatabang.

Kinahanglan usab nimo nga ipahiangay ang roleug aria-livelebel depende sa sulud. Kung kini usa ka hinungdanon nga mensahe sama sa usa ka sayup, gamita ang role="alert" aria-live="assertive", kung dili gamita ang role="status" aria-live="polite"mga hiyas.

Samtang nagbag-o ang sulud nga imong gipakita, siguruha nga i-update ang delaytimeout aron adunay igong oras ang mga tiggamit sa pagbasa sa 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>

Kung gamiton ang autohide: false, kinahanglan nimong idugang ang usa ka close button aron tugutan ang mga tiggamit nga isalikway 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>

Bisan tuod sa teknikal nga paagi posible nga makadugang sa focusable/actionable controls (sama sa dugang nga mga buton o link) sa imong toast, kinahanglan nimong likayan ang pagbuhat niini para sa autohiding toasts. Bisan kung hatagan nimo ang toast ug taas nga delaytimeout , ang mga tiggamit sa keyboard ug assistive nga teknolohiya mahimong maglisud sa pagkab-ot sa toast sa oras aron molihok (tungod kay ang mga toast dili makadawat pokus kung kini gipakita). Kung kinahanglan nimo nga adunay dugang nga mga kontrol, among girekomenda ang paggamit sa usa ka toast nga adunay autohide: false.

CSS

Mga variable

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang mga toast naggamit na karon sa lokal nga CSS variables .toastpara sa gipaayo nga real-time nga customization. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$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 variables

$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

Pagsugod sa mga toast pinaagi sa JavaScript:

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

Mga trigger

Ang pagtangtang mahimong makab-ot gamit ang datahiyas sa usa ka buton sulod sa toast sama sa gipakita sa ubos:

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

o sa usa ka buton sa gawas sa toast gamit ang data-bs-targetgipakita sa ubos:

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

Mga kapilian

Ingon nga ang mga kapilian mahimong ipasa pinaagi sa data attributes o JavaScript, mahimo nimong idugang ang ngalan sa opsyon sa data-bs-, sama sa data-bs-animation="{value}". Siguruha nga usbon ang tipo sa kaso sa ngalan sa kapilian gikan sa " CamelCase " ngadto sa " kebab-case " kung ipasa ang mga kapilian pinaagi sa mga attribute sa datos. Pananglitan, gamita data-bs-custom-class="beautifier"imbes nga data-bs-customClass="beautifier".

Ingon sa Bootstrap 5.2.0, ang tanan nga mga sangkap nagsuporta sa usa ka eksperimento nga gireserba nga kinaiya sa datos data-bs-confignga mahimo’g ibutang ang yano nga pag-configure sa sangkap ingon usa ka string sa JSON. Kung ang usa ka elemento adunay data-bs-config='{"delay":0, "title":123}'ug data-bs-title="456"mga hiyas, ang katapusan titlenga kantidad mao ang 456ug ang bulag nga mga hiyas sa datos mag-override sa mga kantidad nga gihatag sa data-bs-config. Dugang pa, ang naglungtad nga mga hiyas sa datos makahimo sa pagbutang sa mga kantidad sa JSON sama sa data-bs-delay='{"show":0,"hide":150}'.

Pamaagi

Mga panghitabo

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