Ditositi

Kgorometša ditsebišo go baeti ba gago ka tositi, molaetša wa temošo wo o bofefo le wo o ka fetošwago gabonolo.

Letlakaleng le

Di- toast ke ditsebišo tše boima tšeo di hlametšwego go ekiša ditsebišo tša go kgorometša tšeo di tumišitšwego ke ditshepedišo tša go šoma tša diselefouno le tša khomphutha. Di agilwe ka flexbox, ka fao di bonolo go di logaganya le go di bea.

Kakaretšo

Dilo tšeo o swanetšego go di tseba ge o diriša plugin ya tositi:

Di-toast ke tša go kgetha ka mabaka a go šoma, ka gona o swanetše go di thoma ka bowena .
Ditositi di tla iphihla ka go iketla ge e ba o sa laetše autohide: false.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Mehlala

Ya motheo

Go kgothaletša di-toast tšeo di katološwago le tšeo di ka bolelelwago pele, re kgothaletša hlogo le mmele. Toast headers use display: flex, lumella bonolo lolamisiwa ga dikahare leboha rona margin le flexbox utilities.

Di-toast di feto-fetoga le maemo ka mo o nyakago gomme di na le go swaya mo gonyenyane kudu mo go nyakegago. Bonyane, re nyaka elemente e tee go ba le diteng tša gago tša “toasted” gomme re kgothaletša ka maatla konope ya go raka.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Pele, dingwalwa tša rena ka go fetoga di ile tša tlaleletša ka .hidesehlopha go uta tositi ka mo go feletšego (ka display:none, go e na le go fo ba ka opacity:0). Se bjale ga se sa nyakega. Le ge go le bjalo, bakeng sa go sepelelana ga morago, sengwalwa sa rena se tla tšwela pele go fetoša sehlopha (le ge go se na tlhokego ye e šomago ya sona) go fihla phetolelo ye kgolo ye e latelago.

Mohlala o phelang

Tobetsa konopo e ka tlase ho bontša tositi (e behiloeng le utilities rona sekhutlong se ka tlaase le letona) e patiloeng ka default.

Hello, world! This is a toast message.

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

Re diriša JavaScript e latelago go hlohleletša demo ya rena ya tositi e phelago:

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

    toast.show()
  })
}

Se se phadimago

Di-toast di na le translucent go se nene go kopana le seo se lego ka tlase ga tšona.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Go kgoboketša

O ka kgoboketša di- toast ka go di phuthela ka gare ga sebjana sa tositi, seo se tlago go oketša sekgoba se itšego ka go otlologa.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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>

Diteng tša tlwaelo

Tlwaetša di-toast tša gago ka go tloša dikarolo tše dinyenyane, go di tweaking ka didirišwa , goba ka go tlaleletša ka go swaya ga gago. Mona re hlodile tositi e bonolo ka ho tlosa default .toast-header, eketsa tloaelo pata letšoao ho tloha Bootstrap Icons , le ho sebelisa ba bang ba flexbox utilities ho beha peakanyo.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Ka mo go fapanego, o ka oketša gape le ditaolo tše dingwe le dikarolo go di- toast.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Dikema tša mebala

Ka go aga godimo ga mohlala wo o lego ka mo godimo, o ka hlama dikema tša mebala ya tositi tše di fapanego ka didirišwa tša rena tša mebala le tša ka morago . Mona re okeditše .text-bg-primarygo .toast, gomme ka morago ra tlaleletša .btn-close-whitego konope ya rena ya go tswalela. Bakeng sa bohale bo hlakileng, re tlosa moeli oa default ka .border-0.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Go bewa ga dilo

Bea di-toast ka CSS ya tlwaelo ge o di nyaka. Ka godimo ka go le letona gantši e šomišwa go ditsebišo, go swana le ya bogareng bja godimo. Ge e ba o tla tsoga o bontšha feela tositi e tee ka nako, bea mekgwa ya go bea maemo thwii godimo ga .toast.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Bakeng sa ditshepedišo tšeo di tšweletšago ditsebišo tše ntši, nagana ka go šomiša elemente ya go phuthela gore di kgone go kgoboketša gabonolo.

Bona? Go no swana le se.

Dihlogo godimo, toasts tla stack ka tsela e iketsang

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>

O ka boela wa hwetša go makatša ka didirišwa tša flexbox go logaganya di-toast ka go rapalala le/goba ka go otlologa.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Phihlelelo

Di- toast di reretšwe go ba ditšhitišo tše dinyenyane go baeti ba gago goba badiriši, ka gona bakeng sa go thuša bao ba nago le dibadi tša skrine le thekinolotši e swanago ya go thuša, o swanetše go phuthela di- toast tša gago aria-liveseleteng . Diphetogo go dilete tše di phelago (go swana le go hlaba/go mpshafatša karolo ya tositi) di tsebišwa ka go iketla ke babadi ba skrine ntle le go nyaka go šuthiša nepo ya modiriši goba ka tsela ye nngwe go šitiša modiriši. Go tlaleletša, akaretša aria-atomic="true"go netefatša gore tositi ka moka e tsebišwa ka mehla bjalo ka yuniti e tee (ya athomo), go e na le go no tsebiša seo se fetotšwego (seo se ka lebišago mathata ge o mpshafatša fela karolo ya diteng tša tositi, goba ge e ba o bontšha diteng tše di swanago tša tositi ka morago ga nako). Ge e le gore tshedimoo ye e nyakegago e bohlokwa go tshepedio, mohlala, go lenaneo la diphoo ka foromong, gona omia karolo ya temosogo e na le tositi.

Hlokomela gore selete se se phelago se swanetše go ba gona ka go swaya pele tositi e tšweletšwa goba e mpshafatšwa. Ge e ba o tšweletša ka go fetoga bobedi bja tšona ka nako e tee gomme wa di tsenya letlakaleng, ka kakaretšo di ka se tsebišwe ke thekinolotši ya go thuša.

Gape o swanetše go fetoša maemo a rolele aria-livego ya ka diteng. Ge e le molaetša wa bohlokwa go swana le phošo, šomiša role="alert" aria-live="assertive", go sego bjalo šomiša role="status" aria-live="polite"dika.

Ge diteng tšeo o di bontšhago di fetoga, kgonthišetša gore o mpshafatša nako ya go delayfela gore badiriši ba be le nako e lekanego ya go bala tositi.

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

Ge o diriša autohide: false, o swanetše go oketša konope ya go tswalela go dumelela badiriši go lahla tositi.

Thobela, lefase! Ye ke molaetša wa tositi.

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>

Le ge e le gore ka setegeniki go a kgonega go oketša ditaolo tše di tsepamego/tšeo di ka tšeago kgato (go swana le dikonope tša tlaleletšo goba dikgokagano) ka gare ga tositi ya gago, o swanetše go efoga go dira se bakeng sa ditositi tša go iphihla. Even if you give the toast a long delaytimeout , badiriši ba khiiboto le theknolotši ya go thuša ba ka hwetša go le thata go fihlelela tositi ka nako go tšea kgato (ka ge di-toast di sa amogele tsepamiso ya kgopolo ge di bontšhwa). Ge e ba o swanetše go ba le ditaolo tše dingwe ka mo go feletšego, re kgothaletša go diriša tositi yeo e nago le autohide: false.

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya go batamela ga diphetogo tša CSS tša Bootstrap tšeo di tšwelelago, di-toast bjale di diriša diphetogo tša CSS tša lefelong leo godimo .toastbakeng sa go tlwaetša mo go kaonefaditšwego ga nako ya kgonthe. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

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

Diphetogo tša 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);

Tšhomišo

Thoma di-toast ka JavaScript:

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

Dihlohleletši

Go rakwa go ka fihlelelwa ka dataseka godimo ga konope ka gare ga tositi bjalo ka ge go bontšhitšwe ka mo tlase:

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

goba godimo ga konope ka ntle ga tositi o diriša data-bs-targetbjalo ka ge go bontšhitšwe ka mo tlase:

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina	Mohuta	Hlokomologa	Tlhalošo
`animation`	boolean ya go swana	`true`	Diriša phetogo ya go fifala ya CSS go tositi.
`autohide`	boolean ya go swana	`true`	Ka tsela e iketsang pata toast ka mor'a ho lieha.
`delay`	nomoro	`5000`	Diega ka dimilisekontshe pele o uta tositi.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

Mokgwa	Tlhalošo
`dispose`	Pata tositi ya elemente. Toast ya gago e tla dula e le godimo ga DOM eupša e ka se sa bontšha.
`getInstance`	Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa tositi wo o amanago le elemente ya DOM. Mohlala: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`E bušetša mohlala wa tositi ya Bootstrap.
`getOrCreateInstance`	Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa tositi wo o amanago le elemente ya DOM, goba go hlama ye mpsha, ge go ka direga gore e be e sa thongwa. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`E bušetša mohlala wa tositi ya Bootstrap.
`hide`	Pata tositi ya elemente. E boela go mogala pele ga ge tositi e tloga e utilwe (ke gore pele ga ge `hidden.bs.toast`tiragalo e direga). O swanetše go bitša mokgwa wo ka seatla ge o dirile `autohide`go `false`.
`isShown`	E bušetša boolean go ya ka boemo bja go bonagala bja tositi.
`show`	E senola tositi ya elemente. E boela go mogala pele ga ge tositi e bontšhitšwe e le ka kgonthe (ke gore pele `shown.bs.toast`tiragalo e direga). O swanetše go bitša mokgwa wo ka seatla, go e na le moo tositi ya gago e ka se bontšhe.

Ditiragalo

Tiragalo	Tlhalošo
`hide.bs.toast`	Tiragalo ye e thuntšhwa ka pela ge `hide`mokgwa wa mohlala o biditšwe.
`hidden.bs.toast`	Tiragalo ye e thuntšhwa ge tositi e feditše go utollwa go modiriši.
`show.bs.toast`	Tiragalo ye e thunya ka pela ge `show`mokgwa wa mohlala o bitšwa.
`shown.bs.toast`	Tiragalo ye e thuntšhwa ge tositi e dirilwe gore e bonagale go modiriši.

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