ପାରସ୍ପରିକ କ୍ରିୟା
ୟୁଟିଲିଟି କ୍ଲାସ୍ ଯାହା ଉପଭୋକ୍ତାମାନେ ଏକ ୱେବସାଇଟ୍ ର ବିଷୟବସ୍ତୁ ସହିତ କିପରି କାର୍ଯ୍ୟ କରନ୍ତି ତାହା ପରିବର୍ତ୍ତନ କରନ୍ତି |
ପାଠ୍ୟ ଚୟନ
ଉପଭୋକ୍ତା ଯେତେବେଳେ ଏହା ସହିତ ଯୋଗାଯୋଗ କରନ୍ତି, ବିଷୟବସ୍ତୁକୁ ବାଛିଥିବା ପଦ୍ଧତିକୁ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
ଉପଭୋକ୍ତା ଦ୍ୱାରା କ୍ଲିକ୍ ହେବାବେଳେ ଏହି ଅନୁଚ୍ଛେଦଟି ସମ୍ପୂର୍ଣ୍ଣ ରୂପେ ମନୋନୀତ ହେବ |
ଏହି ଅନୁଚ୍ଛେଦରେ ଡିଫଲ୍ଟ ଚୟନ ଆଚରଣ ଅଛି |
ଉପଭୋକ୍ତା ଦ୍ୱାରା କ୍ଲିକ୍ କରିବାବେଳେ ଏହି ଅନୁଚ୍ଛେଦ ଚୟନ ଯୋଗ୍ୟ ହେବ ନାହିଁ |
<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 ଆଟ୍ରିବ୍ୟୁଟ୍ ବ୍ୟବହାର କରିବାକୁ ଚିନ୍ତା କର |
ସାସ୍ |
ଉପଯୋଗିତା 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,
),