Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Toasts

Titari awọn iwifunni si awọn alejo rẹ pẹlu tositi kan, iwuwo fẹẹrẹ ati ifiranṣẹ itaniji asefara ni irọrun.

Lori iwe yi

Toasts jẹ awọn iwifunni iwuwo fẹẹrẹ ti a ṣe apẹrẹ lati ṣe afiwe awọn iwifunni titari ti o jẹ olokiki nipasẹ alagbeka ati awọn ọna ṣiṣe tabili tabili. Wọn ṣe pẹlu flexbox, nitorinaa wọn rọrun lati ṣe deede ati ipo.

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna tositi:

  • Toasts ti yọkuro fun awọn idi iṣẹ, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
  • Toasts yoo tọju laifọwọyi ti o ko ba ṣe pato autohide: false.
Ipa iwara ti paati yii dale lori prefers-reduced-motionibeere media. Wo apakan išipopada ti o dinku ti iwe iraye si wa .

Awọn apẹẹrẹ

Ipilẹṣẹ

Lati ṣe iwuri fun awọn tositi ti o ṣee ṣe ati asọtẹlẹ, a ṣeduro akọsori ati ara. Awọn akọsori tositi lo display: flex, gbigba titete akoonu irọrun o ṣeun si ala wa ati awọn ohun elo flexbox.

Toasts jẹ irọrun bi o ṣe nilo ati pe wọn ni isamisi ti o nilo pupọ. Ni o kere ju, a nilo ipin kan lati ni akoonu “toasted” rẹ ninu ati ṣe iwuri fun bọtini ikọsilẹ.

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>
Ni iṣaaju, awọn iwe afọwọkọ wa fi agbara kun .hidekilasi lati tọju tositi kan patapata (pẹlu display:none, kuku pẹlu nikan opacity:0). Eleyi jẹ bayi ko wulo mọ. Bibẹẹkọ, fun ibaramu sẹhin, iwe afọwọkọ wa yoo tẹsiwaju lati yi kilasi naa pada (botilẹjẹpe ko si iwulo to wulo fun rẹ) titi ti ẹya pataki ti nbọ.

Apeere ifiwe

Tẹ bọtini ni isalẹ lati ṣafihan tositi kan (ti o wa pẹlu awọn ohun elo wa ni igun apa ọtun isalẹ) ti o ti farapamọ nipasẹ aiyipada.

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

A lo JavaScript atẹle lati ṣe okunfa demo tositi ifiwe wa:

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

    toast.show()
  })
}

Translucent

Toasts jẹ translucent die-die lati dapọ mọ ohun ti o wa ni isalẹ wọn.

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>

Iṣakojọpọ

O le tositi tositi nipa yiyi wọn sinu apo eiyan tositi, eyiti yoo ṣafikun aye ni inaro.

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>

Aṣa akoonu

Ṣe akanṣe awọn tositi rẹ nipa yiyọkuro awọn ẹya-ara, tweaking wọn pẹlu awọn ohun elo , tabi nipa fifi aami si tirẹ. Nibi a ti ṣẹda tositi ti o rọrun nipa yiyọkuro aiyipada .toast-header, fifi aami aami pamọ aṣa lati Awọn aami Bootstrap , ati lilo diẹ ninu awọn ohun elo flexbox lati ṣatunṣe ifilelẹ naa.

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>

Ni omiiran, o tun le ṣafikun awọn idari afikun ati awọn paati si awọn 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>

Awọn eto awọ

Ilé lori apẹẹrẹ ti o wa loke, o le ṣẹda awọn ero awọ tositi oriṣiriṣi pẹlu awọ wa ati awọn ohun elo abẹlẹ . Nibi a ti ṣafikun .text-bg-primarysi .toast, ati lẹhinna ṣafikun .btn-close-whitesi bọtini isunmọ wa. Fun eti agaran, a yọ aala aiyipada kuro pẹlu .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>

Ipo

Gbe tositi pẹlu aṣa CSS bi o ṣe nilo wọn. Oke apa ọtun ni igbagbogbo lo fun awọn iwifunni, bii aarin oke. Ti o ba n lọ lati ṣafihan tositi kan ni akoko kan, fi awọn ara ipo si ọtun lori faili .toast.

Bootstrap 11 iṣẹju ago
Mo ki O Ile Aiye! Eyi jẹ ifiranṣẹ tositi kan.
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>

Fun awọn ọna ṣiṣe ti o ṣe agbejade awọn iwifunni diẹ sii, ronu nipa lilo ohun mimu ki wọn le ni irọrun akopọ.

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 tun le ni igbadun pẹlu awọn ohun elo flexbox lati ṣe deede awọn tositi ni ita ati/tabi ni inaro.

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>

Wiwọle

Toasts jẹ ipinnu lati jẹ awọn idilọwọ kekere si awọn alejo tabi awọn olumulo rẹ, nitorinaa lati ṣe iranlọwọ fun awọn ti o ni awọn oluka iboju ati awọn imọ-ẹrọ iranlọwọ ti o jọra, o yẹ ki o fi ipari si awọn tositi rẹ ni aria-liveagbegbe kan . Awọn iyipada si awọn agbegbe laaye (gẹgẹbi abẹrẹ/imudojuiwọn paati tositi) jẹ ikede laifọwọyi nipasẹ awọn oluka iboju laisi nilo lati gbe idojukọ olumulo tabi bibẹẹkọ da olumulo duro. Ni afikun, pẹlu aria-atomic="true"lati rii daju pe gbogbo tositi nigbagbogbo ni a kede bi ẹyọkan (atomu) ẹyọkan, kuku ki o kan kede ohun ti o yipada (eyiti o le ja si awọn iṣoro ti o ba ṣe imudojuiwọn apakan ti akoonu tositi nikan, tabi ti o ba ṣafihan akoonu tositi kanna. ni akoko kan nigbamii). Ti alaye ti o nilo ba ṣe pataki fun ilana naa, fun apẹẹrẹ fun atokọ awọn aṣiṣe ni fọọmu kan, lẹhinna lo paati gbigbọndipo tositi.

Ṣe akiyesi pe agbegbe laaye nilo lati wa ni isamisi ṣaaju ki tositi ti ipilẹṣẹ tabi imudojuiwọn. Ti o ba ṣe ipilẹṣẹ awọn mejeeji ni akoko kanna ti o fi wọn si oju-iwe naa, wọn kii yoo kede ni gbogbogbo nipasẹ awọn imọ-ẹrọ iranlọwọ.

O tun nilo lati ṣatunṣe roleati aria-liveipele ti o da lori akoonu naa. Ti o ba jẹ ifiranṣẹ pataki bi aṣiṣe, lo role="alert" aria-live="assertive", bibẹẹkọ lo role="status" aria-live="polite"awọn abuda.

Bi akoonu ti o n ṣafihan ṣe yipada, rii daju lati ṣe imudojuiwọn delayakoko ipari ki awọn olumulo ni akoko ti o to lati ka tositi naa.

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

Nigbati o ba nlo autohide: false, o gbọdọ ṣafikun bọtini isunmọ lati gba awọn olumulo laaye lati yọ tositi naa kuro.

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>

Lakoko ti imọ-ẹrọ o ṣee ṣe lati ṣafikun awọn iṣakoso idojukọ / iṣẹ ṣiṣe (gẹgẹbi awọn bọtini afikun tabi awọn ọna asopọ) ninu tositi rẹ, o yẹ ki o yago fun ṣiṣe eyi fun awọn tositi adaṣe adaṣe. Paapaa ti o ba fun tositi naa ni igba pipẹ delay, keyboard ati awọn olumulo imọ-ẹrọ iranlọwọ le rii i nira lati de tositi ni akoko lati ṣe iṣe (niwọn bi awọn tositi ko gba idojukọ nigbati wọn ba han). Ti o ba Egba gbọdọ ni awọn idari siwaju, a ṣeduro lilo tositi pẹlu autohide: false.

CSS

Awọn oniyipada

Fi kun v5.2.0

Gẹgẹ bi ara Bootstrap ti o ni ilọsiwaju awọn oniyipada CSS, awọn toasts lo awọn oniyipada CSS agbegbe lori .toastfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

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

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

Lilo

Bẹrẹ awọn toasts nipasẹ JavaScript:

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

Awọn okunfa

Iyọkuro le ṣee ṣe pẹlu dataabuda lori bọtini kan laarin tositi bi a ti ṣe afihan ni isalẹ:

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

tabi lori bọtini kan ni ita tositi ni lilo data-bs-targetbi a ti ṣe afihan ni isalẹ:

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

Awọn aṣayan

Bi awọn aṣayan ṣe le kọja nipasẹ awọn abuda data tabi JavaScript, o le fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="{value}". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati “ CamelCase ” si “ kebab-case ” nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, lo data-bs-custom-class="beautifier"dipo data-bs-customClass="beautifier".

Bi ti Bootstrap 5.2.0, gbogbo awọn paati ṣe atilẹyin abuda data ipamọ idanwodata-bs-config ti o le ṣe atunto paati ti o rọrun bi okun JSON kan. Nigbati ohun kan ba ni data-bs-config='{"delay":0, "title":123}'ati data-bs-title="456"awọn abuda, iye ikẹhin titleyoo jẹ 456ati awọn abuda data lọtọ yoo dojuti awọn iye ti a fun lori data-bs-config. Ni afikun, awọn abuda data ti o wa ni anfani lati gbe awọn iye JSON bii data-bs-delay='{"show":0,"hide":150}'.

Oruko Iru Aiyipada Apejuwe
animation boolian true Waye iyipada CSS ipare si tositi.
autohide boolian true Laifọwọyi tọju tositi lẹhin idaduro naa.
delay nọmba 5000 Idaduro ni awọn iṣẹju-aaya ṣaaju fifipamọ tositi naa.

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Ọna Apejuwe
dispose hides ohun ano ká tositi. Tositi rẹ yoo wa lori DOM ṣugbọn kii yoo ṣafihan mọ.
getInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ tositi ti o ni nkan ṣe pẹlu nkan DOM kan.
Fun apẹẹrẹ: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Pada apẹẹrẹ tositi Bootstrap kan.
getOrCreateInstance Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ tositi ti o ni nkan ṣe pẹlu nkan DOM kan, tabi ṣẹda tuntun kan, ti o ko ba ṣe ipilẹṣẹ.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Pada apeere tositi Bootstrap kan.
hide hides ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti farapamọ gangan (ie ṣaaju ki hidden.bs.toastiṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ ti o ba ṣe autohidesi false.
isShown Pada Boolean kan ni ibamu si ipo hihan tositi.
show Fi han ohun ano ká tositi. Pada si olupe ṣaaju ki tositi ti han gangan (ie ṣaaju ki shown.bs.toastiṣẹlẹ naa to waye). O ni lati pe ọna yii pẹlu ọwọ, dipo tositi rẹ kii yoo han.

Awọn iṣẹlẹ

Iṣẹlẹ Apejuwe
hide.bs.toast Iṣẹlẹ yii jẹ ina lẹsẹkẹsẹ nigbati ọna hideapẹẹrẹ ti pe.
hidden.bs.toast Iṣẹlẹ yii jẹ ina nigbati tositi ti pari ni pamọ lati ọdọ olumulo.
show.bs.toast Yi iṣẹlẹ ina lẹsẹkẹsẹ nigbati awọn showapẹẹrẹ ọna ti a npe ni.
shown.bs.toast Iṣẹlẹ yii jẹ ina nigbati tositi ti jẹ ki o han si olumulo. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})