Կենացներ
Հրում ծանուցումներ ձեր այցելուներին կենացով, թեթև և հեշտությամբ հարմարեցվող ահազանգով:
Կենացները թեթև ծանուցումներ են, որոնք նախատեսված են ընդօրինակելու push ծանուցումները, որոնք հայտնի են դարձել բջջային և աշխատասեղանի օպերացիոն համակարգերի կողմից: Դրանք կառուցված են flexbox-ով, այնպես որ դրանք հեշտ է հարթեցնել և տեղավորել:
Ընդհանուր ակնարկ
Ինչ պետք է իմանաք, երբ օգտագործում եք կենաց հավելումը.
- Կենացները ընտրվում են կատարողական նկատառումներից ելնելով, այնպես որ դուք պետք է նախաստորագրեք դրանք ինքներդ :
- Կենացները ինքնաբերաբար կթաքցվեն, եթե չնշեք
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 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="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<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-ը՝ մեր կենդանի կենաց ցուցադրությունը գործարկելու համար.
var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
Կիսաթափանցիկ
Կենացները մի փոքր կիսաթափանցիկ են, որպեսզի միաձուլվեն դրանց տակ եղածի հետ:
<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
Դուք կարող եք կենացները շարել՝ դրանք փաթաթելով տոստերի տարայի մեջ, որը ուղղահայաց կավելացնի մի փոքր տարածություն:
<div class="toast-container">
<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 որոշ կոմունալ ծառայություններ ՝ դասավորությունը կարգավորելու համար:
<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>
Որպես այլընտրանք, դուք կարող եք նաև ավելացնել լրացուցիչ հսկիչներ և բաղադրիչներ կենացներին:
<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>
Գունային սխեմաներ
Հիմնվելով վերը նշված օրինակի վրա՝ դուք կարող եք ստեղծել տարբեր տոստերի գունային սխեմաներ մեր գունային և ֆոնային կոմունալ ծառայություններով: Այստեղ մենք ավելացրել ենք .bg-primary
և , այնուհետև ավելացրել ենք մեր փակման կոճակին: Հստակ եզրի համար մենք հեռացնում ենք լռելյայն եզրագիծը ..text-white
.toast
.btn-close-white
.border-0
<div class="toast align-items-center text-white 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
.
<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 position-absolute 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>
Համակարգերի համար, որոնք ստեղծում են ավելի շատ ծանուցումներ, հաշվի առեք փաթաթման տարր օգտագործելը, որպեսզի դրանք հեշտությամբ կարողանան կուտակել:
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `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 position-absolute 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>
Դուք կարող եք նաև վայելել ֆլեքսբոքս կոմունալ ծառայությունները՝ կենացները հորիզոնական և/կամ ուղղահայաց հարթեցնելու համար:
<!-- 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
դուք պետք է ավելացնեք փակման կոճակ, որը թույլ կտա օգտվողներին հրաժարվել կենացից:
<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
:
Սաս
Փոփոխականներ
$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: 1px;
$toast-border-color: rgba($black, .1);
$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-ի միջոցով.
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return 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=""
.
Անուն | Տիպ | Կանխադրված | Նկարագրություն |
---|---|---|---|
animation |
բուլյան | true |
Կիրառեք CSS fade անցում դեպի կենաց |
autohide |
բուլյան | true |
Ավտոմատ թաքցնել կենացը |
delay |
թիվ | 5000 |
Կենացը թաքցնելու հետաձգում (մս) |
Մեթոդներ
Ասինխրոն մեթոդներ և անցումներ
Բոլոր API մեթոդները ասինխրոն են և սկսում են անցում : Նրանք վերադառնում են զանգահարողին հենց որ անցումը սկսվի, բայց մինչև այն ավարտվի : Բացի այդ, անցումային բաղադրիչի վրա մեթոդի կանչը անտեսվելու է :
Լրացուցիչ տեղեկությունների համար տես մեր JavaScript փաստաթղթերը :
ցուցադրում
Բացահայտում է տարերքի կենացը: Վերադառնում է զանգահարողին մինչև կենացն իրականում ցուցադրվելը (այսինքն՝ նախքան shown.bs.toast
իրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, փոխարենը ձեր տոստը չի ցուցադրվի:
toast.show()
թաքցնել
Թաքցնում է տարրի կենացը: Վերադառնում է զանգահարողին նախքան կենացն իրականում թաքցվելը (այսինքն՝ նախքան hidden.bs.toast
իրադարձությունը տեղի ունենալը): Դուք պետք է ձեռքով զանգահարեք այս մեթոդը, եթե դիմել autohide
եք false
:
toast.hide()
տնօրինել
Թաքցնում է տարրի կենացը: Ձեր կենացը կմնա DOM-ում, բայց այլևս չի ցուցադրվի:
toast.dispose()
getInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ DOM տարրի հետ կապված տոստերի օրինակը
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
Ստատիկ մեթոդ, որը թույլ է տալիս ստանալ կենաց օրինակ՝ կապված DOM տարրի հետ, կամ ստեղծել նորը, եթե այն նախաստորագրված չէ:
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
Իրադարձություններ
Միջոցառման տեսակը | Նկարագրություն |
---|---|
show.bs.toast |
Այս իրադարձությունը գործարկվում է անմիջապես, երբ show կանչվում է օրինակի մեթոդը: |
shown.bs.toast |
Այս միջոցառումն իրականացվում է, երբ կենացը տեսանելի է դառնում օգտատիրոջը: |
hide.bs.toast |
Այս իրադարձությունը գործարկվում է անմիջապես, երբ hide կանչվում է օրինակի մեթոդը: |
hidden.bs.toast |
Այս միջոցառումը գործարկվում է, երբ կենացն ավարտվում է օգտագործողից թաքցնելուց: |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})