អន្តរកម្ម
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលផ្លាស់ប្តូររបៀបដែលអ្នកប្រើប្រាស់ធ្វើអន្តរកម្មជាមួយមាតិកានៃគេហទំព័រ។
ការជ្រើសរើសអត្ថបទ
ផ្លាស់ប្តូរវិធីដែលមាតិកាត្រូវបានជ្រើសរើសនៅពេលអ្នកប្រើធ្វើអន្តរកម្មជាមួយវា។
កថាខណ្ឌនេះនឹងត្រូវបានជ្រើសរើសទាំងស្រុងនៅពេលចុចដោយអ្នកប្រើប្រាស់។
កថាខណ្ឌនេះមានឥរិយាបថជ្រើសរើសលំនាំដើម។
កថាខណ្ឌនេះនឹងមិនអាចជ្រើសរើសបានទេនៅពេលចុចដោយអ្នកប្រើប្រាស់។
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
ព្រឹត្តិការណ៍ចង្អុល
Bootstrap ផ្តល់ .pe-none
និង .pe-auto
ថ្នាក់ដើម្បីទប់ស្កាត់ ឬបន្ថែមអន្តរកម្មនៃធាតុ។
តំណនេះ មិនអាចចុចបានទេ។
តំណនេះ អាចចុចបាន (នេះជាឥរិយាបទលំនាំដើម)។
តំណនេះ មិនអាចចុចបានទេព្រោះ pointer-events
ទ្រព្យសម្បត្តិត្រូវបានទទួលមរតកពីមេរបស់វា។ ទោះយ៉ាងណាក៏ដោយ តំណភ្ជាប់ នេះមាន pe-auto
ថ្នាក់ និងអាចចុចបាន។
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
ថ្នាក់ .pe-none
(និង pointer-events
លក្ខណៈសម្បត្តិ CSS ដែលវាកំណត់) ការពារតែអន្តរកម្មជាមួយទ្រនិច (កណ្តុរ ស្ទីល ប៉ះ) ប៉ុណ្ណោះ។ តំណ និងការគ្រប់គ្រងជាមួយ .pe-none
គឺតាមលំនាំដើម នៅតែអាចផ្តោតអារម្មណ៍ និងអាចធ្វើសកម្មភាពបានសម្រាប់អ្នកប្រើប្រាស់ក្តារចុច។ ដើម្បីធានាថាពួកវាត្រូវបានអព្យាក្រឹតទាំងស្រុង សូម្បីតែអ្នកប្រើប្រាស់ក្តារចុច អ្នកប្រហែលជាត្រូវបន្ថែមគុណលក្ខណៈបន្ថែមទៀតដូចជា tabindex="-1"
(ដើម្បីការពារពួកគេពីការទទួលការផ្តោតអារម្មណ៍លើក្តារចុច) និង aria-disabled="true"
(ដើម្បីបង្ហាញពីការពិតថាពួកគេត្រូវបានបិទយ៉ាងមានប្រសិទ្ធភាពចំពោះបច្ចេកវិទ្យាជំនួយ) ហើយអាចប្រើ JavaScript ដើម្បី រារាំងពួកគេទាំងស្រុងពីសកម្មភាព។
បើអាចធ្វើបាន ដំណោះស្រាយសាមញ្ញជាងគឺ៖
- សម្រាប់ការគ្រប់គ្រងទម្រង់ បន្ថែម
disabled
គុណលក្ខណៈ HTML ។
- សម្រាប់តំណ សូមដក
href
គុណលក្ខណៈចេញ ធ្វើឱ្យវាក្លាយជាយុថ្កាដែលមិនមានអន្តរកម្ម ឬតំណភ្ជាប់កន្លែងដាក់។
សាស
Utilities API
ឧបករណ៍ប្រើប្រាស់អន្តរកម្មត្រូវបានប្រកាសនៅក្នុង utilities API របស់យើងនៅក្នុង scss/_utilities.scss
. ស្វែងយល់ពីរបៀបប្រើប្រាស់ Utilities API។
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),