ដំណឹងសាររហ័ស
ដំណឹងសាររហ័សជាផ្ទាំងសារតូចមួយដែលចេញពីលើទំព័រដើម្បីផ្ដល់សារ ព័ត៌មានខ្លីៗ និងសារប្រាប់ពីបញ្ហាបច្ចេកទេសដល់អ្នកប្រើប្រាស់។
ឧទាហរណ៍
បុរេជម្រើស
<div class="cgds toast show ">
<div class="toast-header">
<i class="bi bi-check-circle me-2"></i>
<strong class="me-auto">ឈ្មោះសារ</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
នេះជាព័ត៌មានរហ័ស
</div>
</div>
ប្រភេទផ្សេងៗ
<div>
<div class="cgds toast show is-warning mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-exclamation-triangle me-2"></i>
<strong class="me-auto">ការព្រមាន</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
នេះជាការព្រមាន
</div>
</div>
<div class="cgds toast show is-success mb-2" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-check-circle me-2"></i>
<strong class="me-auto">ភាពជោគជ័យ</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
នេះជាសារបញ្ជាក់ប្រតិបត្តិការជោគជ័យ
</div>
</div>
<div class="cgds toast show is-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="bi bi-exclamation-circle me-2"></i>
<strong class="me-auto">គ្រោះថ្នាក់</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
នេះជាសារប្រាប់ពីបញ្ហា
</div>
</div>
</div>
មានប៊ូតុង
<div class="cgds toast show is-danger">
<div class="toast-header">
<i class="bi bi-exclamation-circle me-2"></i>
<strong class="me-auto">ដំណើរការបរាជ័យ</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
ការស្នើសុំបានកើនឡើងលើសពីដែនកំណត់<br />
<button class="btn btn-sm btn-outline-dark">ព្យាយាមម្តងទៀត</button>
</div>
</div>
ធាតុផ្សំ
- រូបតំណាង៖ ជាធាតុបន្ទាប់បន្សំ ប្រើដើម្បីបន្ថែមអត្ថន័យឱ្យសារ។
- ឈ្មោះសារ៖ ប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងរបស់ដំណឹងសាររហ័សនេះ។
- ប៊ូតុងបិទ៖ ប្រើនៅពេលអ្នកមិនបានកំណត់ពេលវេលាឱ្យដំណឹងសាររហ័សបិទទៅវិញដោយស្វ័យប្រវត្តិ និងតម្រូវឱ្យអ្នកប្រើប្រាស់ចុចបិទដោយខ្លួនឯង។
- ប៊ូតុងមុខងារ៖ អនុញ្ញាតឱ្យអ្នកប្រើប្រាស់ចុចទៅកាន់មុខងារដែលនៅក្នុងដំណឹងសាររហ័ស។
គម្លាត
នៅក្នុងដំណឹងសាររហ័ស
រក្សាគម្លាតយ៉ាងតិច 16 px នៅលើគែមជុំវិញរបស់ដំណឹងសាររហ័ស និង 32px នៅចន្លោះរវាងអក្សរនិងប៊ូតុងមុខងារ។
គោលការណ៍ណែនាំនៃការប្រើប្រាស់
ដំណឹងសាររហ័សគួរប្រើប្រាស់នៅពេល៖
- នៅពេលអ្នកចង់បង្ហាញព័ត៌មានខ្លីទៅកាន់អ្នកប្រើប្រាស់។ ឧទាហរណ៍ នៅពេលពួកគាត់បានដាក់ស្នើរទម្រង់ដោយជោគជ័យ ឬនៅពេលមានបញ្ហាមួយកើតឡើង។
ដំណឹងសាររហ័សមិនគួរប្រើប្រាស់នៅពេល៖
- នៅពេលបង្ហាញព័ត៌មានសំខាន់។ ឧទាហរណ៍ នៅពេលប្រព័ន្ធរបស់អ្នកកំពុងស្ថិតនៅក្រោមការត្រួតពិនិត្យ និងកែលម្អ។
គោលការណ៍ណែនាំនៃការរចនា
កុំដាក់ដំណឹងសាររហ័សលោតជាន់ពីលើគ្នា
នៅពេលអ្នកដាក់ការជូនដំណឹងសាររហ័សជាន់ពីលើគ្នា វានឹងធ្វើឱ្យអ្នកប្រើប្រាស់មានការយល់ច្រឡំ។
ករណីដែលអាចដាក់ដំណឹងសាររហ័សត្រួតលើគ្នាបានគឺនៅពេលដែលពួកវាមានខ្លឹមសារស្រដៀងគ្នា។ ឧទាហរណ៍ សារប្រាប់ពីបញ្ហាស្រដៀងៗគ្នា។
រចនាទំហំវាឱ្យតូច និងកុំឱ្យវាចេញមករំខានសកម្មភាពរបស់អ្នកប្រើប្រាស់
ដើម្បីការពារកុំឱ្យវាលោតមកបាំងខ្លឹមសារផ្សេងទៀតរបស់ទំព័រ។
សរសេរវាឱ្យខ្លីបំផុតតាមតែអាចធ្វើបាន
ដំណឹងសាររហ័សបង្ហាញសារព័ត៌មានខ្លីៗដែលគួរតែមានប្រវែងមិនឱ្យលើសពី3ជួរ។
សារព័ត៌មានត្រូវសង្ខេបឱ្យបានខ្លីប៉ុន្តែអាចអានយល់បាន។
ឧទាហរណ៍ គួរសរសេរ "បានបញ្ជូនសារ" ជាជាង "សាររបស់លោកអ្នកត្រូវបានបញ្ជូនទៅឱ្យអ្នកទទួលបានដោយជោគជ័យ"។
ខ្នាតសម្រាប់រចនា
$toast-max-width: 350px !default;
$toast-padding-x: .75rem !default;
$toast-padding-y: .5rem !default;
$toast-font-size: .875rem !default;
$toast-color: null !default;
$toast-background-color: rgba($white, .85) !default;
$toast-border-width: 1px !default;
$toast-border-color: rgba($black, .1) !default;
$toast-border-radius: $border-radius !default;
$toast-box-shadow: $box-shadow !default;
$toast-spacing: $container-padding-x !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
$toast-header-border-color: rgba($black, .05) !default;