Взаємодії

Класи корисності, які змінюють спосіб взаємодії користувачів із вмістом веб-сайту.

Виділення тексту

Змініть спосіб вибору вмісту під час взаємодії користувача з ним.

Цей абзац буде повністю виділено, коли клацне користувач.

Цей абзац має типову поведінку вибору.

Цей абзац не можна буде вибрати, якщо клацнути користувач.

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атрибут, зробивши його неінтерактивним прив’язкою або посиланням-заповнювачем.

Сасс

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