Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Li-toast

Tsoela pele ho tsebiso ho baeti ba hau ka toast, molaetsa oa tlhokomeliso o bobebe ebile o ka o etsa habonolo.

Leqepheng lena

Li-toasts ke litsebiso tse bobebe tse etselitsoeng ho etsisa litsebiso tsa push tse 'nileng tsa tuma ke lits'ebetso tsa mobile le tsa desktop. Li hahiloe ka flexbox, kahoo li bonolo ho ikamahanya le maemo.

Kakaretso

Lintho tseo u lokelang ho li tseba ha u sebelisa plugin ea toast:

  • Li-toast li khetha ho kena ka mabaka a ts'ebetso, kahoo u tlameha ho li qala ka bouena .
  • Li-toast li tla ipata haeba u sa hlakise autohide: false.
Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Mehlala

Motheo

Ho khothaletsa li-toast tse atolositsoeng le tse ka lebelloang, re khothaletsa hlooho le 'mele. Lihlooho tsa toast li sebelisa display: flex, li lumella ho hlophisoa habonolo ha litaba ka lebaka la lisebelisoa tsa rona tsa margin le flexbox.

Li-toast li tenyetseha ka moo u hlokang 'me li na le li-markup tse nyane haholo tse hlokahalang. Bonyane, re hloka ntho e le 'ngoe ho kenyelletsa litaba tsa hau tse "tosted" le ho khothaletsa ka matla konopo ea ho lahla.

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>
Pejana, mangolo a rona a ile a eketsa .hidesehlopha ho pata toast ka botlalo (ka display:none, ho fapana le ka opacity:0). Hona joale ha ho sa hlokahala. Leha ho le joalo, bakeng sa ho lumellana ka morao, script ea rona e tla tsoela pele ho fetola sehlopha (le hoja ho se na tlhoko e sebetsang ea eona) ho fihlela phetolelo e kholo e latelang.

Phela mohlala

Tobetsa konopo e ka tlase ho bontša toast (e behiloe le lisebelisoa tsa rona k'honeng e ka tlase ho le letona) e patiloeng ka ho sa feleng.

<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 sebelisa JavaScript e latelang ho etsa hore demo ea rona e phele:

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

    toast.show()
  })
}

Translucent

Li-toast li fetotsoe hanyane hore li kopane le tse ka tlase ho tsona.

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>

Stacking

U ka bokella li-toast ka ho li phuthela ka har'a sets'oants'o sa toast, se tla eketsa sebaka sa sebaka.

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>

Litaba tse ikhethileng

Iketsetse li-toast tsa hau ka ho tlosa likaroloana, ho li kopanya le lits'ebeletso , kapa ka ho eketsa letšoao la hau. Mona re thehile toast e bonolo ka ho tlosa ea kamehla .toast-header, ho eketsa letšoao la ho pata tloaelo ho tloha Bootstrap Icons , le ho sebelisa lisebelisoa tse ling tsa flexbox ho lokisa sebopeho.

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>

Ntle le moo, o ka eketsa li-control le likarolo tse ling ho li-toast.

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>

Merero ea mebala

Ha u ikahela mohlala o kaholimo, u ka theha merero e fapaneng ea mebala ea toast ka lisebelisoa tsa rona tsa mebala le bokamorao . Mona re ekelitse .text-bg-primaryho .toast, 'me re e kentse .btn-close-whitekonopo ea rona e koalang. Bakeng sa moeli o hlakileng, re tlosa moeli oa kamehla ka .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>

Ho beha

Beha li-toast tse nang le CSS e tloaelehileng kamoo u li hlokang kateng. Ka holimo ho le letona hangata ho sebelisoa bakeng sa litsebiso, joalo ka bohareng ba holimo. Haeba u tla bontša toast e le 'ngoe feela ka nako, beha mekhoa ea ho beha hantle holim'a .toast.

Bootstrap 11 mets e fetileng
Lefatše Lumela! Ona ke molaetsa oa toast.
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 litsamaiso tse hlahisang litemoso tse ngata, nahana ka ho sebelisa ntho e phuthelang e le hore li ka phutheha habonolo.

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>

U ka boela ua ba majabajaba ka lisebelisoa tsa flexbox ho hokahanya li-toast ka holimo le/kapa ka ho otloloha.

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>

Ho fihlella

Li-toast li reretsoe ho ba litšitiso tse nyane ho baeti kapa basebelisi ba hau, kahoo ho thusa ba nang le libali tsa skrine le mahlale a tšoanang a thusang, o lokela ho phuthela li-toast tsa hau aria-livesebakeng se itseng . Liphetoho libakeng tse phelang (joalo ka ho kenya / ho nchafatsa karolo ea toast) li phatlalatsoa ka bo eona ke babali ba skrineng ntle le ho tsamaisa sepheo sa mosebelisi kapa ho sitisa mosebelisi ho seng joalo. Ho phaella moo, kenyelletsa aria-atomic="true"ho netefatsa hore toast eohle e lula e phatlalatsoa e le yuniti e le 'ngoe (athomo), ho e-na le ho phatlalatsa se fetotsoeng (e leng se ka lebisang mathateng ha feela u ka ntlafatsa karolo ea litaba tsa toast, kapa haeba u hlahisa lintho tse tšoanang tsa toast. ha morao ka nako). Haeba lintlha tse hlokahalang li le bohlokoa bakeng sa ts'ebetso, mohlala, bakeng sa lethathamo la liphoso ka foromo, sebelisa karolo ea tlhokomeliso.sebakeng sa toast.

Hlokomela hore sebaka se phelang se hloka ho ba teng ka har'a markup pele toast e hlahisoa kapa e nchafatsoa. Haeba u li hlahisa ka bobeli ka nako e le 'ngoe' me u li kenya leqepheng, hangata li ke ke tsa phatlalatsoa ke mahlale a thusang.

U boetse u hloka ho ikamahanya le maemo rolele aria-liveboemo ho latela litaba. Haeba e le molaetsa oa bohlokoa joalo ka phoso, sebelisa role="alert" aria-live="assertive", ho seng joalo sebelisa role="status" aria-live="polite"litšobotsi.

Ha litaba tseo u li bonts'ang li fetoha, etsa bonnete ba hore u nchafatsa nako ea delaynako e le hore basebelisi ba be le nako e lekaneng ea ho bala 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>

Ha o sebelisa autohide: false, o tlameha ho kenya konopo e koalang ho lumella basebelisi ho tlosa toast.

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 ha ka botekgeniki ho a khonahala ho kenya litaolo tse ka tsepamisoang/tse sebetsang (joalo ka likonopo kapa likhokahano) ho toast ea hau, u lokela ho qoba ho etsa sena bakeng sa ho pata litoast. Esita le haeba o fa toast nako e delaytelele , basebelisi ba keyboard le thekenoloji e thusang ba ka 'na ba thatafalloa ke ho finyella toast ka nako e le hore ba nke khato (kaha li-toast ha li fumane tlhokomelo ha li hlahisoa). Haeba u tlameha ho ba le litaolo tse ling, re khothaletsa ho sebelisa toast e nang le autohide: false.

CSS

Lintho tse fapaneng

E kentsoe ho v5.2.0

E le karolo ea mokhoa oa ho feto-fetoha ha CSS oa Bootstrap, li-toast joale li sebelisa mefuta-futa ea CSS ea lehae .toastbakeng sa mokhoa o ntlafalitsoeng oa nako ea nnete. Litekanyetso tsa mefuta-futa ea CSS li behiloe ka Sass, kahoo mokhoa oa Sass o ntse o tšehetsoa, ​​le oona.

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

Mefuta e fapaneng ea 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šebeliso

Qala ho toast ka JavaScript:

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

Lintho tse susumetsang

Ho lelekoa ho ka finyelloa ka datatšobotsi e holim'a konopo ka har'a toast joalo ka ha ho bontšitsoe ka tlase:

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

kapa ka konopo e ka ntle ho toast u sebelisa se data-bs-targetbontšitsoeng ka tlase:

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

Dikgetho

Kaha likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript, u ​​ka kenyelletsa lebitso la khetho ho data-bs-, joalo ka data-bs-animation="{value}". Etsa bonnete ba hore o fetola mofuta oa nyeoe ea lebitso la khetho ho tloha " camelCase "ho " kebab-case " ha o fetisa likhetho ka litšobotsi tsa data. Ka mohlala, sebelisa data-bs-custom-class="beautifier"ho e-na le data-bs-customClass="beautifier".

Ho tloha ka Bootstrap 5.2.0, likarolo tsohle li ts'ehetsa tlhahlobo ea data e bolokiloeng data-bs-confige ka bolokang tlhophiso e bonolo ea karolo joalo ka khoele ea JSON. Ha element e na data-bs-config='{"delay":0, "title":123}'le data-bs-title="456"litšoaneleho, boleng ba ho qetela titlebo tla ba 456'me lintlha tse arohaneng tsa data li tla feta boleng bo fanoeng ho data-bs-config. Ntle le moo, litšoaneleho tse teng tsa data li khona ho boloka boleng ba JSON joalo ka data-bs-delay='{"show":0,"hide":150}'.

Lebitso Mofuta Ea kamehla Tlhaloso
animation boolean true Sebelisa phetoho ea CSS fade ho toast.
autohide boolean true Pata toast ka bo eona ka mor'a tieho.
delay palo 5000 Lieha ka milliseconds pele u pata toast.

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

Mokhoa Tlhaloso
dispose E pata toast ea element. Toast ea hau e tla lula ho DOM empa ha e sa tla hlola e hlaha.
getInstance Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa toast o amanang le ntho ea DOM.
Mohlala: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)E khutlisa mohlala oa Bootstrap toast.
getOrCreateInstance Mokhoa o tsitsitseng o o lumellang ho fumana mohlala oa toast o amanang le element ea DOM, kapa u thehe e ncha, haeba e sa qalisoa.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)E khutlisa mohlala oa Bootstrap toast.
hide E pata toast ea element. E khutlela ho ea letselitseng pele toast e patiloe (ke hore pele hidden.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho haeba u entse autohideho false.
isShown E khutlisa boolean ho latela boemo ba ponahalo ea toast.
show E hlahisa toast ea element. E khutlela ho ea letselitseng pele toast e bonts'oa (ke hore pele shown.bs.toastketsahalo e etsahala). U tlameha ho letsetsa mokhoa ona ka letsoho, ho fapana le hoo, toast ea hau e ke ke ea hlaha.

Liketsahalo

Ketsahalo Tlhaloso
hide.bs.toast Ketsahalo ena e lelekoa hang hang ha hidemokhoa oa mohlala o bitsoa.
hidden.bs.toast Ketsahalo ena e ts'oaroa ha toast e qeta ho patoa ho mosebelisi.
show.bs.toast Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
shown.bs.toast Ketsahalo ena e ts'oaroa ha toast e entsoe hore e bonahale ho mosebelisi. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})