Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
Check
in English

Tosti

Nosūtiet paziņojumus saviem apmeklētājiem, izmantojot tostu, vieglu un viegli pielāgojamu brīdinājuma ziņojumu.

Šajā lapā

Tosti ir viegli paziņojumi, kas izstrādāti, lai atdarinātu pašpiegādes paziņojumus, ko popularizējušas mobilās un galddatoru operētājsistēmas. Tie ir izgatavoti ar flexbox, tāpēc tos ir viegli izlīdzināt un novietot.

Pārskats

Lietas, kas jāzina, lietojot grauzdiņu spraudni:

  • Tosti ir izvēlēti veiktspējas iemeslu dēļ, tāpēc jums tie ir jāinicializē pašam .
  • Ja nenorādīsit, grauzdiņi tiks automātiski paslēpti autohide: false.
Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Piemēri

Pamata

Lai veicinātu pagarināmus un paredzamus grauzdiņus, iesakām galveni un pamattekstu. Toast galvenes izmanto display: flex, kas ļauj viegli izlīdzināt saturu, pateicoties mūsu margin un flexbox utilītas.

Grauzdiņi ir tik elastīgi, cik nepieciešams, un tiem ir ļoti maz nepieciešamo uzcenojumu. Mēs pieprasām vismaz vienu elementu, kas ietvertu jūsu “grauzdētu” saturu, un ļoti mudinām izmantot noraidīšanas pogu.

html 
<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>
Iepriekš mūsu skripti dinamiski pievienoja .hideklasi, lai pilnībā paslēptu tostu (ar display:none, nevis tikai ar opacity:0). Tagad tas vairs nav nepieciešams. Tomēr, lai nodrošinātu atpakaļejošu saderību, mūsu skripts turpinās pārslēgt klasi (pat ja tas nav praktiski nepieciešams) līdz nākamajai lielajai versijai.

Dzīvs piemērs

Noklikšķiniet uz tālāk esošās pogas, lai parādītu grauzdiņus (kas atrodas mūsu utilītprogrammas apakšējā labajā stūrī), kas pēc noklusējuma ir paslēpts.

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

Mēs izmantojam šādu JavaScript, lai aktivizētu mūsu tiešsaistes grauzdiņa demonstrāciju:

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

    toast.show()
  })
}

Caurspīdīgs

Grauzdiņi ir nedaudz caurspīdīgi, lai saplūstu ar to, kas atrodas zem tiem.

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

Sakraušana

Jūs varat sakraut grauzdiņus, iesaiņojot tos grauzdiņu traukā, kas vertikāli palielinās atstarpi.

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

Pielāgots saturs

Pielāgojiet savus grauzdiņus, noņemot apakškomponentus, pielāgojot tos ar utilītprogrammām vai pievienojot savu marķējumu. Šeit mēs esam izveidojuši vienkāršāku tostu, noņemot noklusējuma .toast-header, pievienojot pielāgotu slēpšanas ikonu no Bootstrap Icons un izmantojot dažas flexbox utilītas , lai pielāgotu izkārtojumu.

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

Varat arī pievienot grauzdiņiem papildu vadīklas un komponentus.

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

Krāsu shēmas

Balstoties uz iepriekš minēto piemēru, varat izveidot dažādas grauzdiņu krāsu shēmas, izmantojot mūsu krāsu un fona utilītas. Šeit mēs esam pievienojuši .text-bg-primary, .toastun pēc tam pievienojuši .btn-close-whitemūsu aizvēršanas pogai. Lai iegūtu izteiksmīgu malu, mēs noņemam noklusējuma apmali ar .border-0.

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

Izvietojums

Ievietojiet grauzdiņus, izmantojot pielāgotu CSS, kad tie ir nepieciešami. Augšējais labais stūris bieži tiek izmantots paziņojumiem, tāpat kā augšējais vidus. Ja vienlaikus rādīsit tikai vienu tostu, novietojiet pozicionēšanas stilus tieši uz .toast.

Bootstrap pirms 11 minūtēm
Sveika pasaule! Šis ir tosts.
html 
<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>

Sistēmām, kas ģenerē vairāk paziņojumu, apsveriet iespēju izmantot iesaiņojuma elementu, lai tos varētu viegli sakraut.

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

Varat arī izmantot flexbox utilītus, lai tostu izlīdzinātu horizontāli un/vai vertikāli.

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

Pieejamība

Tosti ir paredzēti kā nelieli pārtraukumi jūsu apmeklētājiem vai lietotājiem, tāpēc, lai palīdzētu tiem, kam ir ekrāna lasītāji un līdzīgas palīgtehnoloģijas, tosti ir jāiekļauj aria-livereģionā . Ekrāna lasītāji automātiski paziņo par izmaiņām aktīvajos reģionos (piemēram, grauzdiņa komponenta ievadīšana/atjaunināšana), nepārvietojot lietotāja fokusu vai citādi nepārtraucot lietotāja darbību. Turklāt iekļaujiet aria-atomic="true", lai nodrošinātu, ka viss grauzdiņš vienmēr tiek paziņots kā viena (atomu) vienība, nevis tikai paziņots, kas tika mainīts (kas var radīt problēmas, ja atjaunināt tikai daļu no grauzdiņa satura vai ja tiek rādīts tas pats grauzdiņa saturs vēlākā brīdī). Ja vajadzīgā informācija ir svarīga procesam, piemēram, veidlapas kļūdu sarakstam, izmantojiet brīdinājuma komponentugrauzdiņa vietā.

Ņemiet vērā, ka pirms grauzdiņa ģenerēšanas vai atjaunināšanas marķējumā ir jābūt iekļautam reāllaika apgabalam . Ja dinamiski ģenerējat abus vienlaikus un ievietojat tos lapā, palīgtehnoloģijas tos parasti nepaziņos.

Jums arī jāpielāgo roleun aria-livelīmenis atkarībā no satura. Ja tas ir svarīgs ziņojums, piemēram, kļūda, izmantojiet role="alert" aria-live="assertive", pretējā gadījumā izmantojiet role="status" aria-live="polite"atribūtus.

Mainoties rādītajam saturam, noteikti atjauniniet delaytaimautu , lai lietotājiem būtu pietiekami daudz laika, lai izlasītu tostu.

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

Izmantojot autohide: false, jums jāpievieno aizvēršanas poga, lai lietotāji varētu noraidīt tostu.

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

Lai gan tehniski ir iespējams jūsu grauzdiņam pievienot fokusējamas/darbības vadīklas (piemēram, papildu pogas vai saites), jums nevajadzētu to darīt, ja grauzdiņi tiek paslēpti automātiski. Pat ja grauzdiņam piešķirat ilgu delaytaimautu , tastatūras un palīgtehnoloģiju lietotājiem var būt grūti sasniegt tostu laikā, lai veiktu darbības (jo grauzdiņi netiek fokusēti, kad tie tiek parādīti). Ja jums noteikti ir nepieciešamas papildu vadības ierīces, mēs iesakām izmantot grauzdiņus ar autohide: false.

CSS

Mainīgie

Pievienots v5.2.0

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas, tosti tagad izmanto vietējos CSS mainīgos, .toastlai uzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

  --#{$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 mainīgie

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

Lietošana

Inicializēt grauzdiņus, izmantojot JavaScript:

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

Trigeri

Atlaišanu var panākt, izmantojot dataatribūtu uz pogas grauzdiņā , kā parādīts tālāk:

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

vai uz pogas ārpus grauzdiņa , izmantojot data-bs-targettālāk norādīto:

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

Iespējas

Tā kā opcijas var nodot, izmantojot datu atribūtus vai JavaScript, varat pievienot opcijas nosaukumu data-bs-, piemēram, data-bs-animation="{value}". Nododot opcijas, izmantojot datu atribūtus , noteikti nomainiet opcijas nosaukuma reģistra veidu no “ camelCase ” uz “ kebab-case ”. Piemēram, data-bs-custom-class="beautifier"izmantojiet data-bs-customClass="beautifier".

Sākot ar versiju Bootstrap 5.2.0, visi komponenti atbalsta eksperimentālu rezervēto datu atribūtu data-bs-config, kurā var ievietot vienkāršu komponentu konfigurāciju kā JSON virkni. Ja elementam ir atribūti data-bs-config='{"delay":0, "title":123}'un data-bs-title="456", galīgā titlevērtība būs 456un atsevišķie datu atribūti ignorēs vērtības, kas norādītas data-bs-config. Turklāt esošie datu atribūti var ietvert JSON vērtības, piemēram, data-bs-delay='{"show":0,"hide":150}'.

Vārds Tips Noklusējums Apraksts
animation Būla true Lietojiet grauzdiņam CSS izbalēšanas pāreju.
autohide Būla true Automātiski paslēpiet grauzdiņus pēc kavēšanās.
delay numuru 5000 Aizkave milisekundēs pirms grauzdiņa paslēpšanas.

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

Metode Apraksts
dispose Paslēpj elementa grauzdiņus. Jūsu grauzdiņš paliks DOM, bet vairs netiks rādīts.
getInstance Statiskā metode, kas ļauj iegūt grauzdēšanas gadījumu, kas saistīts ar DOM elementu.
Piemēram: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)atgriež Bootstrap grauzdēšanas gadījumu.
getOrCreateInstance Statiskā metode, kas ļauj iegūt grauzdēšanas gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Atgriež Bootstrap grauzdēšanas gadījumu.
hide Paslēpj elementa grauzdiņus. Atgriežas pie zvanītāja, pirms tosts faktiski ir paslēpts (ti, pirms hidden.bs.toastnotikuma). autohideŠī metode ir jāizsauc manuāli, ja veicāt false.
isShown Atgriež Būla vērtību atbilstoši grauzdiņa redzamības stāvoklim.
show Atklāj elementa grauzdiņus. Atgriežas pie zvanītāja, pirms tosts ir faktiski parādīts (ti, pirms shown.bs.toastnotikuma). Šī metode ir jāizsauc manuāli, tā vietā grauzdiņš netiks rādīts.

Pasākumi

Pasākums Apraksts
hide.bs.toast Šis notikums tiek aktivizēts nekavējoties, kad hideir izsaukta instances metode.
hidden.bs.toast Šis notikums tiek aktivizēts, kad grauzdiņš ir paslēpts no lietotāja.
show.bs.toast Šis notikums tiek aktivizēts nekavējoties, kad showtiek izsaukta instances metode.
shown.bs.toast Šis notikums tiek aktivizēts, kad tosts ir padarīts redzams lietotājam. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})