Αλληλεπιδράσεις

Κλάσεις βοηθητικών προγραμμάτων που αλλάζουν τον τρόπο με τον οποίο οι χρήστες αλληλεπιδρούν με το περιεχόμενο ενός ιστότοπου.

Επιλογή κειμένου

Αλλάξτε τον τρόπο με τον οποίο επιλέγεται το περιεχόμενο όταν ο χρήστης αλληλεπιδρά μαζί του.

Αυτή η παράγραφος θα επιλεγεί εξ ολοκλήρου όταν γίνει κλικ από τον χρήστη.

Αυτή η παράγραφος έχει προεπιλεγμένη συμπεριφορά επιλογής.

Αυτή η παράγραφος δεν θα είναι επιλέξιμη όταν την κάνει κλικ ο χρήστης.

html

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

Γεγονότα δείκτη

Το Bootstrap παρέχει .pe-noneκαι .pe-autoκλάσεις για την πρόληψη ή την προσθήκη αλληλεπιδράσεων στοιχείων.

Αυτός ο σύνδεσμος δεν μπορεί να γίνει κλικ.

Μπορείτε να κάνετε κλικ σε αυτόν τον σύνδεσμο (αυτή είναι η προεπιλεγμένη συμπεριφορά).

Δεν είναι δυνατό να γίνει κλικ σε αυτόν τον σύνδεσμο επειδή η pointer-eventsιδιότητα έχει κληρονομηθεί από τη γονική της ιδιότητα. Ωστόσο, αυτός ο σύνδεσμος έχει μια pe-autoκλάση και μπορείτε να κάνετε κλικ.

html

<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κλάση (και η pointer-eventsιδιότητα CSS που ορίζει) αποτρέπει μόνο τις αλληλεπιδράσεις με έναν δείκτη (ποντίκι, γραφίδα, αφή). Οι σύνδεσμοι και τα στοιχεία ελέγχου με .pe-none, από προεπιλογή, εξακολουθούν να εστιάζονται και να λειτουργούν για τους χρήστες πληκτρολογίου. Για να διασφαλίσετε ότι θα εξουδετερωθούν πλήρως ακόμη και για τους χρήστες πληκτρολογίου, ίσως χρειαστεί να προσθέσετε επιπλέον χαρακτηριστικά όπως tabindex="-1"(για να τους αποτρέψετε από τη λήψη εστίασης πληκτρολογίου) και aria-disabled="true"(για να μεταφέρετε το γεγονός ότι είναι ουσιαστικά απενεργοποιημένα στις υποστηρικτικές τεχνολογίες) και πιθανώς να χρησιμοποιήσετε JavaScript για να τους αποτρέψει εντελώς από το να είναι ενεργά.

Εάν είναι δυνατόν, η απλούστερη λύση είναι:

Για στοιχεία ελέγχου φόρμας, προσθέστε το disabledχαρακτηριστικό HTML.

Για συνδέσμους, καταργήστε το hrefχαρακτηριστικό, καθιστώντας το μη διαδραστικό σύνδεσμο αγκύρωσης ή κράτησης θέσης.

Sass

Utilities 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,
    ),