in English
ການໂຕ້ຕອບ
ຫ້ອງຮຽນຜົນປະໂຫຍດທີ່ປ່ຽນແປງວິທີທີ່ຜູ້ໃຊ້ພົວພັນກັບເນື້ອຫາຂອງເວັບໄຊທ໌.
ການເລືອກຂໍ້ຄວາມ
ປ່ຽນວິທີທີ່ເນື້ອຫາຖືກເລືອກເມື່ອຜູ້ໃຊ້ພົວພັນກັບມັນ.
ວັກນີ້ຈະຖືກເລືອກທັງໝົດເມື່ອຄລິກໂດຍຜູ້ໃຊ້.
ວັກນີ້ມີພຶດຕິກໍາການເລືອກເລີ່ມຕົ້ນ.
ວັກນີ້ຈະບໍ່ສາມາດເລືອກໄດ້ເມື່ອຜູ້ໃຊ້ຄລິກ.
<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 ທີ່ມັນກໍານົດ) ພຽງແຕ່ປ້ອງກັນການໂຕ້ຕອບກັບຕົວຊີ້ (ຫນູ, stylus, ສໍາຜັດ). ການເຊື່ອມຕໍ່ແລະການຄວບຄຸມທີ່
.pe-none
ມີ, ໂດຍຄ່າເລີ່ມຕົ້ນ, ຍັງສາມາດສຸມໃສ່ແລະປະຕິບັດໄດ້ສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ. ເພື່ອຮັບປະກັນວ່າພວກມັນຖືກເຮັດໃຫ້ເປັນກາງຢ່າງສົມບູນເຖິງແມ່ນວ່າສໍາລັບຜູ້ໃຊ້ແປ້ນພິມ, ທ່ານອາດຈະຕ້ອງເພີ່ມຄຸນລັກສະນະເພີ່ມເຕີມເຊັ່ນ:
tabindex="-1"
(ເພື່ອປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາໄດ້ຮັບການເນັ້ນໃສ່ແປ້ນພິມ) ແລະ
aria-disabled="true"
(ເພື່ອສະແດງຄວາມຈິງທີ່ວ່າພວກເຂົາຖືກປິດການໃຊ້ງານຢ່າງມີປະສິດທິພາບກັບເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອ), ແລະອາດຈະໃຊ້ JavaScript ເພື່ອ ປ້ອງກັນບໍ່ໃຫ້ພວກເຂົາປະຕິບັດໄດ້ຢ່າງສົມບູນ. ສໍາລັບການຄວບຄຸມແບບຟອມ, ພິຈາລະນານໍາໃຊ້
disabled
ຄຸນລັກສະນະ HTML ແທນ.
ຊາສ
Utilities API
ຜົນປະໂຫຍດປະຕິສໍາພັນໄດ້ຖືກປະກາດຢູ່ໃນ API ຜົນປະໂຫຍດຂອງພວກເຮົາໃນ scss/_utilities.scss
. ຮຽນຮູ້ວິທີການນໍາໃຊ້ API ຜົນປະໂຫຍດ.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),