Структура CSS-классов

Gridstack.js использует набор предопределённых CSS-классов для управления визуальным отображением сетки и её элементов. Правильное понимание структуры этих классов позволяет гибко кастомизировать поведение и внешний вид виджетов.

  • .grid-stack — базовый контейнер сетки. Применяется к элементу, внутри которого будут располагаться все виджеты. Этот класс обеспечивает относительное позиционирование и создание контекста для внутренних элементов.

  • .grid-stack-item — контейнер отдельного виджета сетки. Каждый виджет должен быть обёрнут этим элементом. Этот класс управляет абсолютным позиционированием и размерами виджета внутри сетки, обеспечивая правильное размещение и возможность перетаскивания.

  • .grid-stack-item-content — внутренний контейнер содержимого виджета. Этот класс служит для визуальной части элемента, включая оформление, фон, текст и другие компоненты. Он отделён от оболочки для удобства управления размерами и эффектами без влияния на позиционирование.

  • .ui-resizable-handle — применяемый к элементам, создающим «ручки» для изменения размеров виджетов. Gridstack.js автоматически добавляет такие элементы, если включено свойство resizable. Ручки могут быть размещены по углам и сторонам виджета.

  • .ui-draggable-handle — используется для элементов, за которые можно захватывать и перетаскивать виджет. Этот класс назначается внутреннему элементу виджета, чтобы ограничить область захвата и предотвратить конфликт с другими интерактивными элементами.

Классы состояния виджетов

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

  • .ui-draggable-dragging — применяется к виджету, когда он перетаскивается. Часто используется для добавления прозрачности, тени или изменения границы виджета в момент движения.

  • .ui-resizable-resizing — активируется во время изменения размеров виджета. Позволяет визуально подсвечивать границы и контролировать динамическое масштабирование.

  • .grid-stack-placeholder — временный элемент, который отображается в сетке на месте перемещаемого или создаваемого виджета. Помогает пользователю ориентироваться, где элемент окажется после завершения операции.

  • .grid-stack-empty — применяется к сетке, когда в ней отсутствуют виджеты. Может быть полезен для отображения заглушек или сообщений о пустой сетке.

Классы управления поведением сетки

Gridstack.js также использует CSS-классы для обозначения функциональных особенностей сетки и её элементов:

  • .grid-stack-static — назначается сетке или отдельным виджетам для отключения перетаскивания и изменения размеров. Виджеты с этим классом становятся статичными.

  • .grid-stack-moving — временный класс, который отображается во время перемещения виджета внутри сетки. Позволяет создавать анимацию перемещения или визуальные подсказки.

  • .grid-stack-item-dropping — активируется при перетаскивании нового виджета в сетку. Используется для подсветки доступной зоны размещения и контроля коллизий с существующими элементами.

Кастомизация через CSS

Использование этих классов даёт полный контроль над внешним видом:

  1. Изменение фона виджетов: стиль .grid-stack-item-content позволяет задавать фон, градиенты, тени и рамки без влияния на позиционирование.
.grid-stack-item-content {
    background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
  1. Стилизация перетаскивания: классы .ui-draggable-dragging и .grid-stack-placeholder позволяют создавать плавные анимации и визуальные эффекты перемещения.
.ui-draggable-dragging {
    opacity: 0.7;
    border: 2px dashed #007bff;
}

.grid-stack-placeholder {
    background-color: rgba(0,123,255,0.2);
    border: 1px dashed #007bff;
}
  1. Ограничение взаимодействия: добавление .grid-stack-static к элементам полностью блокирует перетаскивание и изменение размеров, сохраняя их положение в сетке.

Взаимодействие с JavaScript

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

const grid = GridStack.init();

// Добавление нового виджета
grid.addWidget(`<div class="grid-stack-item">
    <div class="grid-stack-item-content">Новый виджет</div>
</div>`, {x:0, y:0, width:2, height:2});

// Применение статического режима
const item = grid.engine.nodes[0].el;
item.classList.add('grid-stack-static');

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

Иерархия и вложенность

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

.grid-stack
 ├─ .grid-stack-item
 │   ├─ .grid-stack-item-content
 │   ├─ .ui-resizable-handle (опционально)
 │   └─ .ui-draggable-handle (опционально)
 └─ .grid-stack-placeholder (динамически при перетаскивании)
  • .grid-stack — корневой контейнер.
  • .grid-stack-item — каждый виджет.
  • .grid-stack-item-content — визуальное содержимое.
  • .ui-resizable-handle и .ui-draggable-handle — вспомогательные элементы для взаимодействия.
  • .grid-stack-placeholder появляется только при перемещении или добавлении виджетов.

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

Оглавление