Адаптивный дизайн

Поведение Tom Select в адаптивных интерфейсах определяется сочетанием конфигурации компонента, CSS-стилей и особенностей DOM-структуры, в которую он встроен. Основная задача адаптивного дизайна в данном контексте — обеспечить одинаково удобное взаимодействие на мобильных устройствах, планшетах и десктопах без деградации функциональности и визуальной логики.

Базовая адаптация начинается с управления шириной исходного <select> и результирующего контейнера Tom Select. Компонент по умолчанию наследует ширину родительского блока, однако в гибких сетках это поведение требует контроля.

Ключевые моменты:

  • использование width: 100% у обёртки для предотвращения переполнения;
  • ограничение максимальной ширины через CSS (max-width);
  • учет поведения flex- и grid-контейнеров.

Важный аспект — предотвращение ситуации, когда dropdown визуально выходит за пределы экрана на узких устройствах. Для этого контейнер должен быть согласован с viewport:

.ts-wrapper {
  width: 100%;
  max-width: 100%;
}

При использовании flex-layout дополнительно учитывается свойство min-width: 0, без которого компонент может игнорировать ограничения родителя.

Управление выпадающим списком на мобильных устройствах

Поведение выпадающего списка критично для адаптивности. На мобильных экранах стандартный dropdown часто перекрывается клавиатурой или выходит за пределы видимой области.

Tom Select предоставляет механизм управления позицией через вычисление координат элемента. В адаптивных интерфейсах важны следующие настройки:

  • автоматическое изменение направления раскрытия;
  • перенос dropdown в body для исключения обрезки overflow-контейнером;
  • ограничение высоты списка.

Типичная конфигурация:

new TomSelect("#select", {
  dropdownParent: "body",
  maxOptions: 100
});

Перенос в body позволяет избежать конфликтов с overflow: hidden у родительских контейнеров, что особенно важно в мобильных layout-сетках.

Адаптивная высота и ограничение списка

На небольших экранах критично ограничивать высоту списка, чтобы он не занимал весь viewport. Это достигается через CSS-переменные и классы состояния.

Основной принцип:

  • ограничение max-height у контейнера dropdown;
  • включение вертикального скролла при переполнении;
  • динамическая подстройка под высоту экрана.
.ts-dropdown {
  max-height: 60vh;
  overflow-y: auto;
}

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

Адаптация ввода и виртуальной клавиатуры

На мобильных устройствах основная проблема — перекрытие интерфейса виртуальной клавиатурой. Tom Select использует input внутри компонента, и его поведение должно быть синхронизировано с viewport.

Ключевые аспекты:

  • увеличение отступов снизу у dropdown;
  • отключение фиксированных позиционирований, мешающих пересчету высоты;
  • использование render-настроек для упрощения списка при вводе.

Пример оптимизации:

new TomSelect("#select", {
  maxOptions: 50,
  render: {
    option: function(data, escape) {
      return `<div class="option">${escape(data.text)}</div>`;
    }
  }
});

Сокращение визуальной сложности списка уменьшает вероятность ошибок выбора на сенсорных экранах.

Реакция на изменение viewport

Адаптивность требует реакции на изменение размеров окна, включая поворот устройства. Tom Select пересчитывает позицию dropdown, но в сложных layout-сценариях требуется дополнительный контроль.

Важные моменты:

  • перерасчет позиции при resize и orientationchange;
  • пересборка dropdown при изменении DOM-контейнеров;
  • синхронизация с CSS media queries.

CSS может задавать поведение, а JavaScript — корректировать динамику:

window.addEventListener("resize", () => {
  const control = document.querySelector(".ts-control");
  if (control && control.tomselect) {
    control.tomselect.positionDropdown();
  }
});

Медиа-адаптация через CSS

Адаптивный дизайн компонента во многом определяется стилями, а не JavaScript-логикой. Использование media queries позволяет менять структуру отображения в зависимости от ширины экрана.

Пример адаптации:

@media (max-width: 600px) {
  .ts-control {
    font-size: 16px;
    padding: 10px;
  }

  .ts-dropdown {
    font-size: 16px;
  }
}

Увеличение размера шрифта на мобильных устройствах снижает вероятность активации zoom-браузера и улучшает точность взаимодействия.

Поведение при множественном выборе

Режим multi-select требует дополнительной адаптации для малых экранов, так как выбранные элементы могут занимать значительное пространство внутри контроллера.

Ключевые стратегии:

  • перенос тегов в несколько строк;
  • ограничение высоты области выбранных элементов;
  • включение горизонтального или вертикального скролла.
.ts-control {
  flex-wrap: wrap;
  gap: 4px;
}

При большом количестве выбранных значений важно предотвращать «раздувание» высоты компонента, особенно внутри мобильных форм.

Управление отображением активного состояния

Адаптивность включает не только размеры, но и визуальную обратную связь. На сенсорных устройствах отсутствует hover, поэтому акцент делается на:

  • :active состояния;
  • визуальное выделение выбранных элементов;
  • увеличение зоны клика.
.ts-dropdown .option {
  padding: 12px;
  min-height: 44px;
}

Минимальная высота интерактивных элементов соответствует требованиям удобного touch-интерфейса.

Оптимизация для производительности на мобильных устройствах

Адаптивный интерфейс должен учитывать ограниченные ресурсы устройств. При большом количестве опций важны:

  • ограничение maxOptions;
  • ленивое отображение элементов;
  • упрощённый render без сложной DOM-структуры.

Чем меньше DOM-узлов внутри dropdown, тем стабильнее прокрутка и быстрее рендеринг.

new TomSelect("#select", {
  maxOptions: 200,
  render: {
    option: (data, escape) => `<div>${escape(data.text)}</div>`
  }
});

Согласование с layout-системами

В современных интерфейсах Tom Select часто используется внутри grid- и flex-систем. Это требует учёта особенностей контейнеров:

  • предотвращение схлопывания ширины (min-width: 0);
  • контроль overflow у родительских блоков;
  • исключение конфликтов с sticky/fixed элементами.

Особенно критично поведение внутри модальных окон, где overflow скрывает dropdown, если он не вынесен в body.

Итоговая архитектура адаптивного поведения

Адаптивность Tom Select формируется как слой над базовой функциональностью:

  • CSS управляет геометрией и типографикой;
  • JavaScript контролирует позиционирование и динамику;
  • конфигурация ограничивает сложность интерфейса;
  • DOM-структура обеспечивает предсказуемое поведение в разных контекстах отображения.
Оглавление