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