ପାରସ୍ପରିକ କ୍ରିୟା

ପାଠ୍ୟ ଚୟନ

ଉପଭୋକ୍ତା ଯେତେବେଳେ ଏହା ସହିତ ଯୋଗାଯୋଗ କରନ୍ତି, ବିଷୟବସ୍ତୁକୁ ବାଛିଥିବା ପଦ୍ଧତିକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

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

ସୂଚକ ଘଟଣା |

ଉପାଦାନର ପାରସ୍ପରିକ କାର୍ଯ୍ୟକଳାପକୁ ରୋକିବା କିମ୍ବା ଯୋଡିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପ୍ ପ୍ରଦାନ କରେ .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ଶ୍ରେଣୀ (ଏବଂ ଏହା ସେଟ୍ କରୁଥିବା CSS pointer-eventsସମ୍ପତ୍ତି) କେବଳ ଏକ ସୂଚକ (ମାଉସ୍, ଷ୍ଟାଇଲସ୍, ସ୍ପର୍ଶ) ସହିତ ପାରସ୍ପରିକ କାର୍ଯ୍ୟକୁ ପ୍ରତିରୋଧ କରିଥାଏ | ଡିଫଲ୍ଟ ଭାବରେ, ଲିଙ୍କ ଏବଂ ନିୟନ୍ତ୍ରଣଗୁଡ଼ିକ .pe-none, କି-ବୋର୍ଡ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ତଥାପି ଧ୍ୟାନଯୋଗ୍ୟ ଏବଂ କାର୍ଯ୍ୟକ୍ଷମ | କୀବୋର୍ଡ୍ ବ୍ୟବହାରକାରୀଙ୍କ ପାଇଁ ମଧ୍ୟ ସେମାନେ ସମ୍ପୂର୍ଣ୍ଣ ନିରପେକ୍ଷ ହୋଇଥିବାର ନିଶ୍ଚିତ କରିବାକୁ, ଆପଣଙ୍କୁ ହୁଏତ ଅଧିକ ଗୁଣଗୁଡିକ ଯୋଡିବାକୁ ପଡିବ ଯେପରିକି tabindex="-1"(ସେମାନଙ୍କୁ କୀବୋର୍ଡ୍ ଫୋକସ୍ ଗ୍ରହଣ ନକରିବା ପାଇଁ) ଏବଂ aria-disabled="true"(ସହାୟକ ପ୍ରଯୁକ୍ତିବିଦ୍ୟାରେ ସେମାନେ ପ୍ରଭାବଶାଳୀ ଭାବରେ ଅକ୍ଷମ ହୋଇଥିବାର ସତ୍ୟତା ଜଣାଇବାକୁ), ଏବଂ ସମ୍ଭବତ Java ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ | ସେମାନଙ୍କୁ କାର୍ଯ୍ୟକ୍ଷମ ହେବାକୁ ସଂପୂର୍ଣ୍ଣ ପ୍ରତିରୋଧ କରନ୍ତୁ |

ଯଦି ସମ୍ଭବ, ସରଳ ସମାଧାନ ହେଉଛି:

• ଫର୍ମ ନିୟନ୍ତ୍ରଣ ପାଇଁ, disabledHTML ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |

• ଲିଙ୍କ୍ ପାଇଁ, ଆଟ୍ରିବ୍ୟୁଟ୍ ଅପସାରଣ କରନ୍ତୁ href, ଏହାକୁ ଏକ ଇଣ୍ଟରାକ୍ଟିଭ୍ ଆଙ୍କର୍ କିମ୍ବା ପ୍ଲେସହୋଲ୍ଡର୍ ଲିଙ୍କ୍ କରନ୍ତୁ |

ସାସ୍ |

ଉପଯୋଗିତା 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,
    ),