នំដុត
ជំរុញការជូនដំណឹងទៅកាន់អ្នកទស្សនារបស់អ្នកជាមួយនឹង toast, សារជូនដំណឹងទម្ងន់ស្រាល និងអាចប្ដូរតាមបំណងយ៉ាងងាយស្រួល។
Toasts គឺជាការជូនដំណឹងទម្ងន់ស្រាលដែលត្រូវបានរចនាឡើងដើម្បីធ្វើត្រាប់តាមការជូនដំណឹងជំរុញដែលត្រូវបានពេញនិយមដោយប្រព័ន្ធប្រតិបត្តិការទូរស័ព្ទ និងកុំព្យូទ័រ។ ពួកវាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox ដូច្នេះពួកវាងាយស្រួលក្នុងការតម្រឹម និងដាក់ទីតាំង។
ទិដ្ឋភាពទូទៅ
អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយ toast៖
- Toasts ត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលដំណើរការ ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម វា ដោយខ្លួនឯង
- Toasts នឹងលាក់ដោយស្វ័យប្រវត្តិ ប្រសិនបើអ្នកមិនបញ្ជាក់
autohide: false
។
prefers-reduced-motion
សំណួរមេឌៀ។ សូមមើល
ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្���ួលរបស់យើង ។
ឧទាហរណ៍
មូលដ្ឋាន
ដើម្បីលើកទឹកចិត្តដល់ការដុតនំដែលអាចពង្រីកបាន និងអាចទស្សន៍ទាយបាន យើងសូមណែនាំបឋមកថា និងតួ។ បឋមកថា Toast ប្រើ 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>
ជង់
អ្នកអាចជង់នំដុតដោយរុំវានៅក្នុងធុងដុត ដែលនឹងបន្ថែមគម្លាតមួយចំនួនបញ្ឈរ។
<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 ដើម្បីតម្រឹមនំបញ្ចុកផ្តេក និង/ឬបញ្ឈរ។
<!-- 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>
ភាពងាយស្រួល
Toasts មានបំណងដើម្បីជាការរំខានតិចតួចដល់អ្នកទស្សនា ឬអ្នកប្រើប្រាស់របស់អ្នក ដូច្នេះដើម្បីជួយអ្នកដែលមានកម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា អ្នកគួរតែរុំនំបុ័ងរបស់អ្នកនៅក្នុង aria-live
តំបន់ មួយ ។ ការផ្លាស់ប្តូរទៅតំបន់បន្តផ្ទាល់ (ដូចជាការចាក់/ធ្វើបច្ចុប្បន្នភាពសមាសធាតុ toast) ត្រូវបានប្រកាសដោយស្វ័យប្រវត្តិដោយអ្នកអានអេក្រង់ ដោយមិនចាំបាច់ផ្លាស់ទីការផ្តោតអារម្មណ៍របស់អ្នកប្រើ ឬរំខានអ្នកប្រើប្រាស់។ លើសពីនេះទៀត រួមបញ្ចូល aria-atomic="true"
ដើម្បីធានាថា toast ទាំងមូលតែងតែត្រូវបានប្រកាសជាឯកតា (អាតូមិក) តែមួយ ជាជាងការប្រកាសពីអ្វីដែលបានផ្លាស់ប្តូរ (ដែលអាចនាំឱ្យមានបញ្ហាប្រសិនបើអ្នកគ្រាន់តែធ្វើបច្ចុប្បន្នភាពផ្នែកនៃមាតិការបស់ toast ឬប្រសិនបើបង្ហាញមាតិកា toast ដូចគ្នា នៅពេលក្រោយ) ។ ប្រសិនបើព័ត៌មានដែលត្រូវការមានសារៈសំខាន់សម្រាប់ដំណើរការ ឧទាហរណ៍សម្រាប់បញ្ជីកំហុសក្នុងទម្រង់មួយ បន្ទាប់មកប្រើ សមាសភាគការជូនដំណឹងជំនួសឱ្យនំប៉័ង។
ចំណាំថាតំបន់បន្តផ្ទាល់ត្រូវតែមានវត្តមាននៅក្នុងការសម្គាល់ មុនពេល toast ត្រូវបានបង្កើត ឬធ្វើបច្ចុប្បន្នភាព។ ប្រសិនបើអ្នកបង្កើតថាមវន្តទាំងពីរក្នុងពេលតែមួយ ហើយបញ្ចូលពួកវាទៅក្នុងទំព័រ ជាទូទៅពួកវានឹងមិនត្រូវបានប្រកាសដោយបច្ចេកវិទ្យាជំនួយទេ។
អ្នកក៏ត្រូវសម្របសម្រួល 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
អស់ រយៈពេលយូរ ក៏ដោយ អ្នកប្រើប្រាស់ក្តារចុច និងបច្ចេកវិទ្យាជំនួយអាចពិបាកក្នុងការឈានដល់ការដុតនំប៉័ងទាន់ពេលដើម្បីធ្វើសកម្មភាព (ចាប់តាំងពីនំបុ័ងអាំងមិនទទួលបានការផ្តោតអារម្មណ៍នៅពេលវាត្រូវបានបង្ហាញ)។ ប្រសិនបើអ្នកពិតជាត្រូវតែមានការគ្រប់គ្រងបន្ថែមទៀត យើងសូមណែនាំឱ្យប្រើ toast ជាមួយ 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
គុណលក្ខណៈនៅលើប៊ូតុងមួយ នៅក្នុង toast ដូចដែលបានបង្ហាញខាងក្រោម៖
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
ឬនៅលើប៊ូតុង នៅខាងក្រៅ toast ដោយប្រើ 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 ទៅ toast |
autohide |
ប៊ូលីន | true |
លាក់នំបុ័ងដោយស្វ័យប្រវត្តិ |
delay |
ចំនួន | 5000 |
ពន្យាពេលលាក់នំដុត (ms) |
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅវិធីសាស្រ្តលើ សមាសភាគការផ្លាស់ប្តូរនឹងត្រូវបានមិនអើពើ ។
បង្ហាញ
បង្ហាញការដុតរបស់ធាតុ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលដែលនំបញ្ចុកត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧ. មុន shown.bs.toast
ព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីសាស្ត្រនេះដោយដៃ ជំនួសវិញ toast របស់អ្នកនឹងមិនបង្ហាញទេ។
toast.show()
លាក់
លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលការដុតត្រូវបានលាក់ (ឧ. មុនពេល hidden.bs.toast
ព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីនេះដោយដៃប្រសិនបើអ្នកបានបង្កើត autohide
ទៅ false
.
toast.hide()
បោះចោល
លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ នំបុ័ងអាំងរបស់អ្នកនឹងនៅតែមាននៅលើ DOM ប៉ុន្តែនឹងមិនបង្ហាញទៀតទេ។
toast.dispose()
getInstance
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ toast ដែលភ្ជាប់ជាមួយធាតុ DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ toast ដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
ព្រឹត្តិការណ៍
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.toast |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
shown.bs.toast |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការដុតត្រូវបានធ្វើឱ្យអ្នកប្រើមើលឃើញ។ |
hide.bs.toast |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់ភ្លាមៗនៅពេលដែល hide វិធីសាស្ត្រវត្ថុត្រូវបានហៅ។ |
hidden.bs.toast |
ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល toast បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់។ |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})