ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
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>

ಪಾಯಿಂಟರ್ ಘಟನೆಗಳು

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅಂಶ ಸಂವಹನಗಳನ್ನು ತಡೆಯಲು ಅಥವಾ ಸೇರಿಸಲು ಒದಗಿಸುತ್ತದೆ .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"(ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ ಎಂಬ ಅಂಶವನ್ನು ತಿಳಿಸಲು) ಮತ್ತು ಪ್ರಾಯಶಃ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವಂತಹ ಹೆಚ್ಚಿನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೀವು ಸೇರಿಸಬೇಕಾಗಬಹುದು. ಅವುಗಳನ್ನು ಕಾರ್ಯಸಾಧ್ಯವಾಗದಂತೆ ಸಂಪೂರ್ಣವಾಗಿ ತಡೆಯಿರಿ.

ಸಾಧ್ಯವಾದರೆ, ಸರಳವಾದ ಪರಿಹಾರವೆಂದರೆ:

  • ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳಿಗಾಗಿ, 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,
    ),