Կենացներ
Հրում ծանուցումներ ձեր այցելուներին կենացով, թեթև և հեշտությամբ հարմարեցվող ահազանգով:
Կենացները թեթև ծանուցումներ են, որոնք նախատեսված են ընդօրինակելու push ծանուցումները, որոնք հայտնի են դարձել բջջային և աշխատասեղանի օպերացիոն համակարգերի կողմից: Դրանք կառուցված են flexbox-ով, այնպես որ դրանք հեշտ է հարթեցնել և տեղավորել:
Ընդհանուր ակնարկ
Ինչ պետք է իմանաք, երբ օգտագործում եք կենաց հավելումը.
- Եթե դուք կառուցում եք մեր JavaScript-ը աղբյուրից, դա պահանջում է
util.js
: - Կենացները ընտրվում են կատարողական նկատառումներից ելնելով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
- Խնդրում ենք նկատի ունենալ, որ դուք պատասխանատու եք կենացների տեղադրման համար:
- Կենացները ինքնաբերաբար կթաքցվեն, եթե չնշեք
autohide: false
:
prefers-reduced-motion
լրատվամիջոցների հարցումից: Տեսեք
մեր մատչելիության փաստաթղթերի կրճատված շարժման բաժինը :
Օրինակներ
Հիմնական
Ընդլայնվող և կանխատեսելի կենացները խրախուսելու համար խորհուրդ ենք տալիս վերնագիր և մարմին: Տոստի վերնագրերը օգտագործում են 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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Ապրեք
Սեղմեք ներքևի կոճակը՝ ցույց տալու համար կենացը (տեղադրված է մեր կոմունալ ծառայություններով ներքևի աջ անկյունում), որը լռելյայն թաքցված է եղել .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
<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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</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">11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</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">×</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">×</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">×</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">×</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">×</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="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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Թեև տեխնիկապես հնարավոր է ավելացնել կենտրոնացված/գործող հսկիչները (օրինակ՝ լրացուցիչ կոճակներ կամ հղումներ) ձեր կենացների մեջ, դուք պետք է խուսափեք դա անել՝ կենացները ինքնաթաքնվելու համար: Նույնիսկ եթե դուք երկար ժամանակ եք տալիս delay
կենացին , ստեղնաշարի և օժանդակ տեխնոլոգիաների օգտատերերը կարող են դժվարանալ ժամանակին հասնել կենացին, որպեսզի քայլեր ձեռնարկեն (քանի որ կենացները չեն կենտրոնանում, երբ ցուցադրվում են): Եթե դուք անպայման պետք է ունենաք լրացուցիչ հսկողություն, խորհուրդ ենք տալիս օգտագործել կենացը autohide: false
:
JavaScript-ի վարքագիծը
Օգտագործումը
Նախաձեռնել կենացները JavaScript-ի միջոցով.
$('.toast').toast(option)
Ընտրանքներ
Ընտրանքները կարող են փոխանցվել տվյալների ատրիբուտների կամ JavaScript-ի միջոցով: Տվյալների ատրիբուտների համար ավելացրեք տարբերակի անունը data-
, ինչպես data-animation=""
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
անիմացիա | բուլյան | ճիշտ | Կիրառեք CSS fade անցում դեպի կենաց |
ինքնաթաքնվել | բուլյան | ճիշտ | Ավտոմատ թաքցնել կենացը |
ուշացում | թիվ | 500 |
Կենացը թաքցնելու հետաձգում (մս) |
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :
$().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')
Իրադարձություններ
Միջոցառման տեսակը | Նկարագրություն |
---|---|
շոու.բս.կենաց | Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: |
ցուցադրված.բս.կենաց | Այս միջոցառումն իրականացվում է, երբ կենացը տեսանելի է դառնում օգտատիրոջը: |
թաքցնել.բս.կենաց | Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
թաքնված.բս.կենաց | Այս միջոցառումը գործարկվում է, երբ կենացն ավարտվում է օգտագործողից թաքցնելուց: |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})