Resize bar — элемент интерфейса¶

Resize bar (также resize handle, splitter, разделительная полоса) — графический элемент пользовательского интерфейса, предназначенный для изменения размеров окон, панелей, ячеек или других компонентов интерфейса перетаскиванием мышью. Обычно представляет собой узкую полосу или маркер на границе двух областей, при наведении на который курсор меняет форму, а последующее удерживание кнопки мыши и перемещение позволяют менять соотношение размеров смежных элементов.

¶Назначение и принцип работы

Resize bar решает задачу динамической настройки раскладки интерфейса под текущие потребности пользователя. В отличие от фиксированных размеров, задаваемых разработчиком, resize bar позволяет оперативно расширять или сужать панели — например, увеличивать ширину списка файлов в файловом менеджере или высоту нижней консоли в интегрированной среде разработки.

Принцип работы основан на трёх базовых событиях:

• Наведение (hover) — курсор меняет вид (стрелку в две стороны) при попадании на зону захвата, сигнализируя о возможности изменения размера.
• Начало перетаскивания (drag start) — фиксируется начальное положение и текущие размеры элементов.
• Перетаскивание (drag) — размеры пересчитываются пропорционально смещению курсора до отпускания кнопки мыши.

Зона захвата (hit area) часто шире видимой полосы — это упрощает попадание курсором, особенно на сенсорных экранах.

¶Типы resize bar

По способу изменения размеров выделяют:

• Горизонтальные — изменяют высоту смежных элементов (например, разделение текстовой области и панели вывода).
• Вертикальные — изменяют ширину смежных элементов (например, соотношение дерева файлов и редактора кода).
• Угловые (corner handles) — изменяют оба размера одновременно, часто используются для изменения размеров диалоговых окон.

По поведению при перетаскивании:

• С пропорциональным ограничением — один элемент уменьшается ровно настолько, насколько увеличивается другой, суммарная длина остаётся постоянной.
• С ограничением минимального/максимального размера — не даёт элементу стать меньше заданного минимума или больше максимума.
• С «липкими» точками (snap) — при приближении к определённым значениям размер «прилипает» к ним, что удобно для выравнивания.

¶Реализация в вебе

В HTML-странице resize bar реализуется несколькими способами:

• CSS resize — свойство, позволяющее менять размер блочного элемента с помощью встроенного маркера в правом нижнем углу. Поддерживает значения horizontal, vertical, both. Ограничено по возможностям настройки.
• Свойство user-select: none — предотвращает выделение текста при перетаскивании.
• CSS Grid — свойство grid-template-columns с функцией minmax() в сочетании с JavaScript-обработчиками позволяет создавать интерактивные разделители между колонками.
• JavaScript — обработчики событий mousedown, mousemove, mouseup (или Pointer Events API) обеспечивают полный контроль над процессом, включая ограничения, привязку и анимацию.

Пример минимальной реализации на JavaScript:

```javascript handle.addEventListener('mousedown', (e) => { const startX = e.clientX; const startWidth = panel.offsetWidth;

const onMove = (e) => { panel.style.width = startWidth + (e.clientX - startX) + 'px'; };

const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };

document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); }); ```

¶Resize bar в операционных системах

В настольных операционных системах resize bar присутствует в большинстве файловых менеджеров и инструментов:

• Windows Explorer — разделитель между деревом папок и содержимым.
• macOS Finder — аналогичный элемент с характерной анимацией.
• Панели в IDE (Visual Studio Code, JetBrains IDEs) — перетаскиваемые разделители между редактором, терминалом, панелями отладки.
• Браузеры — панель разработчика, менеджеры загрузок.

¶Доступность

При проектировании resize bar учитываются требования доступности: разделитель должен быть фокусируемым с клавиатуры (атрибут tabindex), поддерживать навигацию стрелками (события keydown для клавиш со стрелками) и иметь семантическое описание (ARIA-атрибуты role="separator", aria-orientation, aria-valuenow).

¶См. также

• Пользовательский интерфейс
• CSS Grid
• Drag and drop

¶Источники

• MDN Web Docs — CSS resize, Pointer Events API
• WAI-ARIA Authoring Practices — разделительные полосы (separator pattern)
• Документация Microsoft Windows User Experience Guidelines
• Документация Apple Human Interface Guidelines