នំដុត
ជំរុញការជូនដំណឹងទៅកាន់អ្នកទស្សនារបស់អ្នកជាមួយនឹង toast, សារជូនដំណឹងទម្ងន់ស្រាល និងអាចប្ដូរតាមបំណងយ៉ាងងាយស្រួល។
Toasts គឺជាការជូនដំណឹងទម្ងន់ស្រាលដែលត្រូវបានរចនាឡើងដើម្បីធ្វើត្រាប់តាមការជូនដំណឹងជំរុញដែលត្រូវបានពេញនិយមដោយប្រព័ន្ធប្រតិបត្តិការទូរស័ព្ទ និងកុំព្យូទ័រ។ ពួកវាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox ដូច្នេះពួកវាងាយស្រួលក្នុងការតម្រឹម និងដាក់ទីតាំង។
ទិដ្ឋភាពទូទៅ
អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយ toast៖
- ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារ
util.js
. - 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 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>
ជង់
នៅពេលដែលអ្នកមាននំបុ័ងអាំងច្រើន យើងកំណត់លំនាំដើមក្នុងការដាក់ជង់វាបញ្ឈរក្នុងលក្ខណៈដែលអាចអានបាន។
<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 ដើម្បីតម្រឹមនំបញ្ចុកផ្តេក និង/ឬបញ្ឈរ។
<!-- 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>
ភាពងាយស្រួល
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-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
អស់ រយៈពេលយូរ ក៏ដោយ អ្នកប្រើប្រាស់ក្តារចុច និងបច្ចេកវិទ្យាជំនួយអាចពិបាកក្នុងការឈានដល់ការដុតនំប៉័ងទាន់ពេលដើម្បីធ្វើសកម្មភាព (ចាប់តាំងពីនំបុ័ងអាំងមិនទទួលបានការផ្តោតអារម្មណ៍នៅពេលវាត្រូវបានបង្ហាញ)។ ប្រសិនបើអ្នកពិតជាត្រូវតែមានការគ្រប់គ្រងបន្ថែមទៀត យើងសូមណែនាំឱ្យប្រើ toast ជាមួយ autohide: false
.
ឥរិយាបថ JavaScript
ការប្រើប្រាស់
ចាប់ផ្តើមនំបុ័ងអាំងតាមរយៈ JavaScript៖
$('.toast').toast(option)
ជម្រើស
ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-
ដូចក្នុង data-animation=""
.
ឈ្មោះ | ប្រភេទ | លំនាំដើម | ការពិពណ៌នា |
---|---|---|---|
ចលនា | ប៊ូលីន | ពិត | អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅ toast |
លាក់ដោយស្វ័យប្រវត្តិ | ប៊ូលីន | ពិត | លាក់នំបុ័ងដោយស្វ័យប្រវត្តិ |
ពន្យាពេល | ចំនួន | 500 |
ពន្យាពេលលាក់នំដុត (ms) |
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅតាមវិធីសាស្ត្រលើ សមាសភាគអន្តរកាលនឹងត្រូវបានមិនអើពើ ។
$().toast(options)
ភ្ជាប់ឧបករណ៍ដោះស្រាយនំប៉័ងទៅនឹងបណ្តុំធាតុ។
.toast('show')
បង្ហាញការដុតរបស់ធាតុ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលដែលនំបញ្ចុកត្រូវបានបង្ហាញយ៉ាងពិតប្រាកដ (ឧ. មុន shown.bs.toast
ព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីសាស្ត្រនេះដោយដៃ ជំនួសវិញ toast របស់អ្នកនឹងមិនបង្ហាញទេ។
$('#element').toast('show')
.toast('hide')
លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលការដុតត្រូវបានលាក់ (ឧ. មុន hidden.bs.toast
ព្រឹត្តិការណ៍កើតឡើង)។ អ្នកត្រូវហៅវិធីនេះដោយដៃប្រសិនបើអ្នកបានបង្កើត autohide
ទៅ false
.
$('#element').toast('hide')
.toast('dispose')
លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ នំបុ័ងអាំងរបស់អ្នកនឹងនៅតែមាននៅលើ DOM ប៉ុន្តែនឹងមិនបង្ហាញទៀតទេ។
$('#element').toast('dispose')
ព្រឹត្តិការណ៍
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.toast | ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
show.bs.toast | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែលការដុតត្រូវបានធ្វើ��ឱ្យអ្នកប្រើមើលឃើញ។ |
hide.bs.toast | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់ភ្លាមៗនៅពេលដែល hide វិធីសាស្ត្រវត្ថុត្រូវបានហៅ។ |
hidden.bs.toast | ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល toast បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់។ |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})