Interactions (взаимодействие)

Введение в утилиты взаимодействия

Утилиты взаимодействия в Bootstrap позволяют управлять тем, как пользователи взаимодействуют с элементами на вашем сайте. Эти утилиты контролируют такие поведения, как возможность клика по элементу, выбор текста или прокрутка.

Почему стоит использовать утилиты взаимодействия?

• Улучшение UX: Предотвращение случайных кликов или выделений.
• Добавление интерактивности: Включение или отключение определенных действий программно.
• Упрощение разработки: Быстрое применение стилей без написания пользовательского CSS.

Когда их использовать?

• Для отключения взаимодействий с неактивными кнопками или наложениями.
• Для предотвращения выбора текста в интерфейсах drag-and-drop.
• Для управления прокруткой в контейнерах.

Поведение выбора текста

Утилиты выбора текста контролируют, могут ли пользователи выделять текст внутри элемента.

• user-select-none - запрещает выделение текста.
• user-select-auto - позволяет выделение текста (поведение по умолчанию).
• user-select-all - выделяет весь текст при клике на элемент.

<p class="user-select-all">Этот абзац будет полностью выделен при нажатии пользователем.</p>
<p class="user-select-auto">Этот абзац имеет поведение выбора по умолчанию.</p>
<p class="user-select-none">Этот абзац не будет доступен для выбора при щелчке пользователя.</p>

События указателя

События указателя определяют, может ли элемент реагировать на действия мыши, касания или стилуса. Например:

• Включено: элемент реагирует на клики, касания или наведение.
• Отключено: элемент игнорирует все действия указателя.

• pe-none - отключает события указателя для элемента.
• pe-auto - включает события указателя (поведение по умолчанию).

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Эту ссылку</a> нельзя нажать.</p>
<p><a href="#" class="pe-auto">Эту ссылку</a> можно нажать (это поведение по умолчанию).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">Эту ссылку</a> нельзя нажать, так как свойство <code>pointer-events</code> унаследовано от ее родителя. Однако <a href="#" class="pe-auto">эта ссылка</a> имеет класс <code>pe-auto</code> и ее можно нажать.</p>

Класс .pe-none (и задаваемое им свойство pointer-events CSS) предотвращает взаимодействие только с указателем (мышью, стилусом, сенсорным экраном). Ссылки и элементы управления с .pe-none по умолчанию по-прежнему доступны для фокусировки и действий пользователей клавиатуры. Чтобы они были полностью недоступны даже для пользователей клавиатуры, вам может потребоваться добавить дополнительные атрибуты, такие как tabindex="-1" (чтобы они не получали фокус клавиатуры) и aria-disabled="true" (чтобы вспомогательные технологии понимали, что они фактически отключены), а также, возможно, использовать JavaScript, чтобы полностью исключить возможность их использования.

Если возможно, то более простым решением является:

• Для элементов управления формой добавьте атрибут disabled HTML.
• Для ссылок удалите атрибут href, чтобы сделать их неинтерактивными якорями или ссылками-заполнителями.

Прокрутка

Утилиты прокрутки в Bootstrap позволяют управлять тем, как содержимое выходит за пределы контейнеров.

Управление прокруткой

Управляйте, будет ли содержимое прокручиваться, обрезаться или расширяться естественно.

• overflow-auto - добавляет полосы прокрутки только при переполнении содержимого.
• overflow-hidden - скрывает переполняющее содержимое.
• overflow-visible - позволяет содержимому выходить за пределы контейнера.
• overflow-scroll - всегда отображает полосы прокрутки, независимо от размера содержимого.

<div class="overflow-auto" style="height: 70px;">
  <p>Содержимое, которое выходит за пределы, будет прокручиваться.</p>
</div>
<div class="overflow-hidden" style="height: 70px;">
  <p>Переполняющее содержимое обрезано и не видно.</p>
</div>
<div class="overflow-visible" style="height: 70px;">
  <p>Переполняющее содержимое будет видно за пределами контейнера.</p>
</div>
<div class="overflow-scroll" style="height: 70px;">
  <p>Содержимое всегда прокручивается, даже если оно помещается.</p>
</div>

Советы и сценарии из реальной жизни

Слоистые наложения

Чтобы создать модальное окно или наложение, где кликабельна только кнопка закрытия:

<div class="pe-none">
  <div class="pe-auto">
    <button class="btn btn-danger">Закрыть</button>
  </div>
</div>

Отключение перетаскивания и выбора текста

Для элемента с функцией перетаскивания, где вы хотите предотвратить случайное выделение текста:

<div class="user-select-none" draggable="true">
  Перетащите меня без выделения текста!
</div>

Прокручиваемое выпадающее меню

Убедитесь, что выпадающие списки прокручиваются при длинных списках:

<div class="dropdown-menu overflow-auto" style="max-height: 200px;">
  <a class="dropdown-item" href="#">Элемент 1</a>
  <a class="dropdown-item" href="#">Элемент 2</a>
  <!-- Дополнительные элементы -->
</div>

Интерактивная песочница

Полный пример для экспериментов с утилитами:

<div class="container py-5">
  <h2>Песочница утилит взаимодействия</h2>
  <div class="mb-3">
    <button class="btn btn-primary pe-none">События указателя отключены</button>
  </div>
  <div class="mb-3 user-select-none">
    Попробуйте выделить этот текст (у вас не получится).
  </div>
  <div class="mb-3 overflow-auto" style="max-height: 100px; border: 1px solid #ccc;">
    <p>Прокрутите меня! Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
  </div>
</div>

CSS

API утилит Sass

Утилиты взаимодействия объявлены в API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

"user-select": (
  property: user-select,
  values: all auto none
),
"pointer-events": (
  property: pointer-events,
  class: pe,
  values: none auto,
),

Эта подробная документация предоставляет основы и практические примеры использования утилит взаимодействия Bootstrap 5. Экспериментируйте с этими утилитами в своих проектах, чтобы улучшить пользовательский опыт!