Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
Check
in English

Կենացներ

Հրում ծանուցումներ ձեր այցելուներին կենացով, թեթև և հեշտությամբ հարմարեցվող ահազանգով:

Այս էջում

Կենացները թեթև ծանուցումներ են, որոնք նախատեսված են ընդօրինակելու push ծանուցումները, որոնք հայտնի են դարձել բջջային և աշխատասեղանի օպերացիոն համակարգերի կողմից: Դրանք կառուցված են flexbox-ով, այնպես որ դրանք հեշտ է հարթեցնել և տեղավորել:

Ընդհանուր ակնարկ

Ինչ պետք է իմանաք, երբ օգտագործում եք կենաց հավելումը.

  • Կենացները ընտրվում են կատարողական նկատառումներից ելնելով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
  • Կենացները ինքնաբերաբար կթաքցվեն, եթե չնշեք autohide: false:
Այս բաղադրիչի անիմացիոն էֆեկտը կախված է prefers-reduced-motionլրատվամիջոցների հարցումից: Տեսեք մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :

Օրինակներ

Հիմնական

Ընդլայնվող և կանխատեսելի կենացները խրախուսելու համար խորհուրդ ենք տալիս վերնագիր և մարմին: Տոստի վերնագրերը օգտագործում են display: flex, որը թույլ է տալիս հեշտությամբ հավասարեցնել բովանդակությունը՝ շնորհիվ մեր լուսանցքի և flexbox կոմունալ ծառայությունների:

Կենացները այնքան ճկուն են, որքան անհրաժեշտ է և շատ քիչ պահանջվող նշում ունեն: Մենք պահանջում ենք առնվազն մեկ տարր, որը պարունակում է ձեր «կենաց» բովանդակությունը և խստորեն խրախուսում է մերժել կոճակը:

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>
Նախկինում մեր սկրիպտները դինամիկ կերպով ավելացնում էին .hideդասը՝ ամբողջությամբ թաքցնելու կենացը (ի հետ display:none, այլ ոչ թե պարզապես opacity:0): Սա այժմ այլևս անհրաժեշտ չէ։ Այնուամենայնիվ, հետընթաց համատեղելիության համար մեր սցենարը կշարունակի փոխել դասը (չնայած դրա գործնական անհրաժեշտությունը չկա) մինչև հաջորդ հիմնական տարբերակը:

Կենդանի օրինակ

Սեղմեք ներքևի կոճակը՝ ցույց տալու համար լռելյայն թաքցված տոստը (տեղադրված է մեր կոմունալ ծառայություններով ներքևի աջ անկյունում):

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

Մենք օգտագործում ենք հետևյալ JavaScript-ը՝ մեր կենդանի կենաց ցուցադրությունը գործարկելու համար.

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

    toast.show()
  })
}

Կիսաթափանցիկ

Կենացները մի փոքր կիսաթափանցիկ են, որպեսզի միաձուլվեն դրանց տակ եղածի հետ:

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

Դուք կարող եք կենացները շարել՝ դրանք փաթաթելով տոստերի տարայի մեջ, որը ուղղահայաց կավելացնի մի փոքր տարածություն:

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>

Պատվերով բովանդակություն

Անհատականացրեք ձեր կենացները՝ հեռացնելով ենթաբաղադրիչները, դրանք շտկելով կոմունալ ծառայություններով կամ ավելացնելով ձեր սեփական նշումը: Այստեղ մենք ստեղծել ենք ավելի պարզ կենաց՝ հեռացնելով լռելյայնը .toast-header, ավելացնելով հատուկ թաքցնելու պատկերակ Bootstrap Icons- ից և օգտագործելով flexbox որոշ կոմունալ ծառայություններ ՝ դասավորությունը կարգավորելու համար:

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>

Որպես այլընտրանք, դուք կարող եք նաև ավելացնել լրացուցիչ հսկիչներ և բաղադրիչներ կենացներին:

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>

Գունային սխեմաներ

Հիմնվելով վերը նշված օրինակի վրա՝ դուք կարող եք ստեղծել տարբեր տոստերի գունային սխեմաներ մեր գունային և ֆոնային կոմունալ ծառայություններով: Այստեղ մենք ավելացրել .text-bg-primaryենք .toast, և այնուհետև ավելացրել .btn-close-whiteենք մեր փակման կոճակը: Հստակ եզրի համար մենք հեռացնում ենք լռելյայն եզրագիծը .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>

Տեղադրում

Տեղադրեք կենացներ հատուկ CSS-ով, ինչպես դրանք ձեզ անհրաժեշտ են: Վերևի աջը հաճախ օգտագործվում է ծանուցումների համար, ինչպես նաև վերին միջին մասը: Եթե ​​դուք երբևէ պատրաստվում եք միայն մեկ կենաց ցույց տալ, տեղադրեք դիրքավորման ոճերը հենց .toast.

Bootstrap 11 րոպե առաջ
Բարեւ աշխարհ! Սա կենաց հաղորդագրություն է:
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>

Համակարգերի համար, որոնք ստեղծում են ավելի շատ ծանուցումներ, հաշվի առեք փաթաթման տարր օգտագործելը, որպեսզի դրանք հեշտությամբ կարողանան կուտակել:

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>

Դուք կարող եք նաև վայելել ֆլեքսբոքս կոմունալ ծառայությունները՝ կենացները հորիզոնական և/կամ ուղղահայաց հարթեցնելու համար:

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>

Մատչելիություն

Կենացները նախատեսված են որպես փոքր ընդհատումներ ձեր այցելուների կամ օգտատերերի համար, ուստի էկրանի ընթերցողներ և նմանատիպ օժանդակ տեխնոլոգիաներ ունեցողներին օգնելու համար դուք պետք է ձեր կենացները փաթաթեք aria-liveտարածաշրջանում : Կենդանի շրջաններում կատարվող փոփոխությունները (օրինակ՝ կենաց բաղադրիչի ներարկումը/թարմացումը) ավտոմատ կերպով հայտարարվում են էկրանի ընթերցողների կողմից՝ առանց օգտագործողի ուշադրությունը տեղափոխելու կամ օգտագործողին այլ կերպ ընդհատելու անհրաժեշտության: Բացի այդ, ներառեք aria-atomic="true"՝ ապահովելու համար, որ ամբողջ կենացը միշտ հայտարարվի որպես մեկ (ատոմային) միավոր, այլ ոչ թե պարզապես հայտարարվի, թե ինչ է փոխվել (ինչը կարող է խնդիրներ առաջացնել, եթե թարմացնեք միայն կենացի բովանդակության մի մասը, կամ եթե ցուցադրեք նույն տոստը։ ավելի ուշ ժամանակի ընթացքում): Եթե ​​անհրաժեշտ տեղեկատվությունը կարևոր է գործընթացի համար, օրինակ՝ ձևի սխալների ցանկի համար, ապա օգտագործեք զգուշացման բաղադրիչըտոստի փոխարեն։

Նկատի ունեցեք, որ կենդանի շրջանը պետք է առկա լինի նշագրման մեջ՝ նախքան կենացը ստեղծելը կամ թարմացնելը: Եթե ​​դինամիկ կերպով գեներացնեք երկուսն էլ միաժամանակ և ներարկեք դրանք էջ, դրանք հիմնականում չեն հայտարարվի օժանդակ տեխնոլոգիաների միջոցով:

Դուք նաև պետք է հարմարեցնեք մակարդակը roleև aria-liveմակարդակը՝ կախված բովանդակությունից: Եթե ​​դա կարևոր հաղորդագրություն է, ինչպիսին է սխալը, օգտագործեք role="alert" aria-live="assertive", հակառակ դեպքում օգտագործեք role="status" aria-live="polite"ատրիբուտներ:

Քանի որ ձեր ցուցադրած բովանդակությունը փոխվում է, համոզվեք, որ թարմացնեք delayժամանակի վերջնաժամկետը , որպեսզի օգտվողները բավականաչափ ժամանակ ունենան կենացը կարդալու համար:

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

Օգտագործելիս autohide: falseդուք պետք է ավելացնեք փակման կոճակ, որը թույլ կտա օգտվողներին հրաժարվել կենացից:

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>

Թեև տեխնիկապես հնարավոր է ավելացնել կենտրոնացված/գործող հսկիչները (օրինակ՝ լրացուցիչ կոճակներ կամ հղումներ) ձեր կենացների մեջ, դուք պետք է խուսափեք դա անել՝ կենացները ինքնաթաքնվելու համար: Նույնիսկ եթե դուք երկար ժամանակ եք տալիս delayկենացին , ստեղնաշարի և օժանդակ տեխնոլոգիաների օգտատերերը կարող են դժվարանալ ժամանակին հասնել կենացին, որպեսզի քայլեր ձեռնարկեն (քանի որ կենացները չեն կենտրոնանում, երբ ցուցադրվում են): Եթե ​​դուք անպայման պետք է ունենաք լրացուցիչ հսկողություն, խորհուրդ ենք տալիս օգտագործել կենացը autohide: false:

CSS

Փոփոխականներ

Ավելացված է v5.2.0-ում

Որպես Bootstrap-ի զարգացող CSS փոփոխականների մոտեցման մաս, կենացներն այժմ օգտագործում են տեղական CSS փոփոխականներ՝ .toastիրական ժամանակում կատարելագործված հարմարեցման համար: CSS փոփոխականների արժեքները սահմանվում են Sass-ի միջոցով, ուստի Sass-ի հարմարեցումը դեռևս աջակցվում է:

  --#{$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 փոփոխականներ

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

Օգտագործումը

Նախաձեռնել կենացները JavaScript-ի միջոցով.

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

Գործարկիչներ

Աշխատանքից հեռացնելը կարելի է հասնել կենացում գտնվողdata կոճակի հատկանիշով, ինչպես ցույց է տրված ստորև.

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

կամ կենացից դուրս գտնվող կոճակի վրա՝ օգտագործելով data-bs-targetստորև ցուցադրվածը.

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

Ընտրանքներ

Քանի որ ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով, կարող եք տարբերակի անուն ավելացնել data-bs-, ինչպես օրինակում data-bs-animation="{value}": Համոզվեք, որ փոխեք տարբերակի անվան պատյանների տեսակը « camelCase »-ից « kebab-case »՝ ընտրանքները տվյալների ատրիբուտների միջոցով փոխանցելիս: Օրինակ՝ օգտագործել data-bs-custom-class="beautifier"փոխարենը data-bs-customClass="beautifier":

Bootstrap 5.2.0-ի դրությամբ բոլոր բաղադրիչներն աջակցում են փորձարարական վերապահված տվյալների հատկանիշ data-bs-config, որը կարող է տեղավորել պարզ բաղադրիչի կազմաձևումը որպես JSON տող: Երբ տարրն ունի data-bs-config='{"delay":0, "title":123}'և data-bs-title="456"ատրիբուտներ, վերջնական titleարժեքը կլինի, 456և առանձին տվյալների ատրիբուտները կգերակայեն .-ին տրված արժեքներին data-bs-config: Բացի այդ, առկա տվյալների ատրիբուտները կարող են տեղավորել JSON արժեքներ, ինչպիսիք են data-bs-delay='{"show":0,"hide":150}'.

Անուն Տիպ Կանխադրված Նկարագրություն
animation բուլյան true Կիրառեք CSS fade անցում դեպի կենաց:
autohide բուլյան true Ավտոմատ թաքցնել կենացը ուշացումից հետո:
delay թիվ 5000 Կենացը թաքցնելուց առաջ հապաղեք միլիվայրկյաններով:

Մեթոդներ

Ասինխրոն մեթոդներ և անցումներ

Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :

Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :

Մեթոդ Նկարագրություն
dispose Թաքցնում է տարրի կենացը: Ձեր կենացը կմնա DOM-ում, բայց այլևս չի ցուցադրվի:
getInstance Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված տոստերի օրինակը:
Օրինակ՝ const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)վերադարձնում է Bootstrap կենաց օրինակ:
getOrCreateInstance Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ կենաց օրինակ՝ կապված DOM տարրի հետ, կամ ստեղծել նորը, եթե այն նախաստորագրված չէ:
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Վերադարձնում է Bootstrap կենաց օրինակ:
hide Թաքցնում է տարրի կենացը: Վերադառնում է զանգահարողին նախքան կենացն իրականում թաքցվելը (այսինքն՝ նախքան hidden.bs.toastիրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, եթե դիմել autohideեք false:
isShown Վերադարձնում է բուլին՝ ըստ տոստերի տեսանելիության վիճակի:
show Բացահայտում է տարերքի կենացը: Վերադառնում է զանգահարողին մինչև կենացն իրականում ցուցադրվելը (այսինքն՝ նախքան shown.bs.toastիրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, փոխարենը ձեր տոստը չի ցուցադրվի:

Իրադարձություններ

Իրադարձություն Նկարագրություն
hide.bs.toast Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideկանչվում է օրինակի մեթոդը:
hidden.bs.toast Այս միջոցառումը գործարկվում է, երբ կենացն ավարտվում է օգտագործողից թաքցնելուց:
show.bs.toast Այս իրադարձությունը գործարկվում է անմիջապես, երբ showկանչվում է օրինակի մեթոդը:
shown.bs.toast Այս միջոցառումն իրականացվում է, երբ կենացը տեսանելի է դառնում օգտատիրոջը: 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})