Размеры элементов

Gridstack.js — это мощная библиотека для построения сеточных интерфейсов с поддержкой перетаскивания и изменения размеров виджетов. Размеры элементов в Gridstack.js определяются в ячейках сетки, а не в пикселях, что позволяет создавать адаптивные интерфейсы, легко подстраивающиеся под разные разрешения экранов.

Атрибуты размеров элементов

Каждый элемент сетки (widget) в Gridstack.js имеет два ключевых атрибута, определяющие его размеры:

  1. data-gs-width — ширина элемента в ячейках сетки.
  2. data-gs-height — высота элемента в ячейках сетки.

Пример разметки:

<div class="grid-stack">
  <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="2" data-gs-height="3">
    <div class="grid-stack-item-content">Элемент 1</div>
  </div>
  <div class="grid-stack-item" data-gs-x="2" data-gs-y="0" data-gs-width="3" data-gs-height="2">
    <div class="grid-stack-item-content">Элемент 2</div>
  </div>
</div>

В данном примере первый элемент занимает 2 ячейки по ширине и 3 по высоте, второй — 3×2.

Изменение размеров через API

Gridstack.js позволяет динамически изменять размеры элементов через методы API:

  • resize(el, width, height) — изменяет размеры указанного элемента:
const grid = GridStack.init();
const item = document.querySelector('.grid-stack-item');
grid.resize(item, 4, 2); // ширина 4, высота 2
  • update(el, {width, height}) — более гибкий метод, позволяет одновременно обновлять положение и размеры:
grid.update(item, {width: 3, height: 3, x: 1, y: 2});

Ограничения размеров

Gridstack.js предоставляет возможность задавать минимальные и максимальные размеры элементов:

  • min-width и min-height — минимальные размеры в ячейках.
  • max-width и max-height — максимальные размеры в ячейках.

Пример:

grid.addWidget('<div class="grid-stack-item" data-gs-width="2" data-gs-height="2"></div>', 
  {minWidth: 1, minHeight: 1, maxWidth: 4, maxHeight: 3});

Эти ограничения автоматически применяются при изменении размеров элемента через перетаскивание или API.

Относительные размеры и адаптивность

Gridstack.js поддерживает автоматическую подгонку размеров элементов при изменении размера сетки. При изменении ширины контейнера сетки все элементы перераспределяются в соответствии с заданными размерами в ячейках, сохраняя пропорции и ограничения.

Чтобы обеспечить адаптивность:

  • Задавать фиксированное количество колонок через опцию column.
  • Использовать опцию cellHeight: 'auto' для автоматического подстраивания высоты ячеек под содержимое.
  • Активировать float: true, чтобы элементы автоматически смещались, если свободного места недостаточно.

Пример инициализации сетки с адаптивной высотой:

const grid = GridStack.init({
  column: 12,
  cellHeight: 'auto',
  float: true
});

Динамическое изменение размеров через события

Gridstack.js позволяет отслеживать изменения размеров элементов с помощью событий:

  • resizestart — начало изменения размера.
  • resizemove — изменение в процессе.
  • resizestop — завершение изменения размера.

Пример:

grid.on('resizestop', function(event, el) {
  const node = el.gridstackNode;
  console.log(`Элемент ${node.id} имеет новые размеры: ${node.width}x${node.height}`);
});

События позволяют синхронизировать размеры виджетов с внешними компонентами, например, графиками или таблицами.

Работа с элементами разной пропорции

Для создания элементов с нестандартными пропорциями удобно использовать комбинацию min/max ограничений и изменяемых размеров через API.

Пример создания широкого баннера:

grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content">Баннер</div></div>', 
  {width: 6, height: 2, minWidth: 4, maxWidth: 12});

Элемент может растягиваться по ширине от 4 до 12 ячеек, сохраняя фиксированную высоту.

Итоговая структура размеров

  1. Ширина и высота задаются через data-gs-width/data-gs-height или API.
  2. Ограничения задаются через min/max параметры.
  3. Адаптивность достигается с помощью настроек сетки и автоматической высоты ячеек.
  4. События изменения размеров позволяют реагировать на действия пользователя.

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

Оглавление