អន្តរកម្ម

ការជ្រើសរើសអត្ថបទ

ផ្លាស់ប្តូរវិធីដែលមាតិកាត្រូវបានជ្រើសរើសនៅពេលអ្នកប្រើធ្វើអន្តរកម្មជាមួយវា។

<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ថ្នាក់ដើម្បីទប់ស្កាត់ ឬបន្ថែមអន្តរកម្មនៃធាតុ។

<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,
    ),