Создание и настройка разделимой панели в HTML с CSS/JS

Быстрый ответ

Чтобы создать разделённое окно в HTML, лучше всего использовать CSS Flexbox. Примените display: flex; к стилю контейнера и flex: 1; к каждой из секций, чтобы равномерно распределились по ширине:

<div style="display: flex; height: 100vh;">
  <div style="flex: 1; background: #add8e6;">Левая половина</div>
  <div style="flex: 1; background: #90ee90;">Правая половина</div>
</div>

Этот код создаёт две панели одинакового размера, которые без проблем обеспечивают заполнение всей высоты браузера и автоматически подстраиваются под его размеры.

Flexbox: элементы для изменения размеров панелей

Контроль за размером панелей cтороны пользователя

Панели можно сделать изменяемыми, применяв свойство resize из CSS:

.resizable {
  overflow: auto;
  resize: horizontal;
  width: 50%;
  min-width: 100px;  /* Минимальный размер предотвращает слишком малые панели */
}

Чтобы обеспечить удобное взаимодействие с изменяемыми элементами, задайте user-select:none для тех элементов, что будут перетаскиваться:

.draggable-area {
  cursor: col-resize;
  user-select: none;
}

Подробнее об этом расскажет наш спикер на видео

Расширенное изменение размеров с использованием JavaScript

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

const dragElement = (element) => {
  element.onmousedown = dragMouseDown;
  // ... (Составим JavaScript код!)
};

Сеточные структуры: шаг вперёд

Для создания сложной структуры воспользуйтесь CSS Grid, он позволит вам более точно контролировать разделение на колонки и строки:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Распределим пространство поровну */
}

Акцент на стилизацию: эффектное разделение

Улучшите восприятие визуальных разделителей, применив градиенты или фоновые изображения. Установите вынужденные размеры min-width, чтобы панели имели определённый размер минимум. Показательные индикаторы cursor: col-resize или cursor: row-resize помогут понять, что эти элементы интерфейса можно изменить.

Работа с горизонтальными и вертикальными разделителями

Воспользуйтесь offsetLeft и offsetTop для точного управления перемещением разделителя и динамично адаптируйте размеры панелей с использованием обработчиков событий мыши.

Проверка на совместимость доступности

Кроме использования библиотеки Simpledrag, как замены для drag-and-drop, проверяйте совместимость с различными браузерами и типами устройств. Уделите особое внимание ограничениям на изменение размеров при различных экранах.

Визуализация

Представьте дом с двуми разделёнными комнатами:

🏠: [🛋️ Гостиная |  🍳 Кухня]
Пример разделённого окна в HTML:

<div style="display: flex;">
  <div style="flex: 1;">🛋️</div> <!-- Гостиная: зона отдыха -->
  <div style="flex: 1;">🍳</div> <!-- Кухня: место кулинарного мастерства -->
</div>

Схоже с дверью-аккордеоном, которая меняет размер комнат:

🏠: [🛋️🚪🛰️ Гостиная |  🚪🍳🥘 Кухня]

Макеты в HTML могут быть настолько же универсальными, как хорошо спланированный дизайн интерьера.

Погружение в Split.js: Краткое руководство

Первые шаги

Split.js прекрасно подходит для создания изменяемых панелей, он совместим с устаревшими браузерами. Он работает без jQuery и позволяет задать размеры панелей:

Split(['#left', '#right'], {
  sizes: [50, 50],
  minSize: 100,
  gutterSize: 10,
  cursor: 'col-resize',
});

Как сочетать Flexbox и CSS Grid с Split.js

Используйте Flexbox или CSS Grid в сочетании с Split.js при разработке динамичных и адаптивных макетов. Ключом к успешному дизайну является задание изменяемых процентных размеров панелей.

Обратите внимание на опыт пользователя

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

1. Установите ограничения размеров с помощью min-width или min-height. (Не позволяйте панелям "исчезать"!)
2. Адаптируйте размеры панелей отзывчиво, применяя события resize при изменении размеров окна браузера.

Полезные материалы

1. Основы работы с сеточными макетами – Руководство по CSS Grid от MDN.
2. Всё, что вам нужно знать о Flexbox – Подробное руководство по Flexbox на сайте CSS-Tricks.
3. Как создать макет с разделением экрана – Учебник W3Schools, посвященный созданию разделённого экрана с использованием HTML и CSS.
4. GitHub – angular/flex-layout – Исходный код и документация Angular Flex Layout.
5. Создание пользовательских директив | Vue.js – Руководство по созданию директивов в Vue.js для реализации разделенного просмотра.