interactions.mdx 952 B

12345678910111213141516171819202122232425262728
  1. ---
  2. title: Interactions
  3. summary: Utility classes that change how users interact with contents of a website.
  4. description: Modify user interactions efficiently.
  5. ---
  6. ## Text selection
  7. Change the way in which the content is selected when the user interacts with it.
  8. ```html example columns={1} centered separated
  9. <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
  10. <p class="user-select-auto">This paragraph has default select behavior.</p>
  11. <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
  12. ```
  13. ## Pointer events
  14. Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
  15. ```html example columns={1} centered separated
  16. <p>
  17. <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
  18. </p>
  19. <p>
  20. <a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).
  21. </p>
  22. ```