Կենացներ

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

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

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

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

• Եթե ​​դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում էutil.js :
• Կենացները ընտրվում են կատարողական նկատառումներից ելնելով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
• Կենացները ինքնաբերաբար կթաքցվեն, եթե չնշեք autohide: false:

Օրինակներ

Հիմնական

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

Կենացները նույնպես մի փոքր կիսաթափանցիկ են, ուստի դրանք խառնվում են այն ամենի վրա, ինչի վրա կարող են հայտնվել: Բրաուզերների համար, որոնք աջակցում են backdrop-filterCSS հատկությունը, մենք կփորձենք նաև լղոզել տարրերը կենացների տակ:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Stacking

Երբ դուք ունեք մի քանի կենացներ, մենք լռելյայն տեղադրում ենք դրանք ուղղահայաց ընթեռնելի ձևով:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Տեղադրում

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

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

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript-ի վարքագիծը

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

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

$('.toast').toast(option)

Ընտրանքներ

Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-, ինչպես data-animation="".

Մեթոդներ

$().toast(options)

Տարրերի հավաքածուին կցում է կենաց մշակող:

.toast('show')

Բացահայտում է տարերքի կենացը: Վերադառնում է զանգահարողին մինչև կենացն իրականում ցուցադրվելը (այսինքն՝ նախքան shown.bs.toastիրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, փոխարենը ձեր տոստը չի ցուցադրվի:

$('#element').toast('show')

.toast('hide')

Թաքցնում է տարրի կենացը: Վերադառնում է զանգահարողին նախքան կենացն իրականում թաքցվելը (այսինքն՝ նախքան hidden.bs.toastիրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, եթե դիմել autohideեք false:

$('#element').toast('hide')

.toast('dispose')

Թաքցնում է տարրի կենացը: Ձեր կենացը կմնա DOM-ում, բայց այլևս չի ցուցադրվի:

$('#element').toast('dispose')

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

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})