.grid-stack Главный контейнер для всех
виджетов сетки. Этот класс отвечает за инициализацию сетки, применяет
базовые стили и обеспечивает корректное позиционирование элементов
внутри контейнера. Он всегда должен присутствовать на корневом элементе,
который инициализируется через GridStack.init().
.grid-stack-item Каждый виджет сетки
оборачивается в элемент с этим классом. Он управляет размером,
позиционированием и взаимодействием с другими виджетами. В сочетании с
атрибутами gs-x, gs-y, gs-w,
gs-h задаёт положение и размеры элемента.
.grid-stack-item-content
Непосредственное содержимое виджета. Этот класс используется для
стилизации внутреннего блока виджета. Он наследует размеры от
.grid-stack-item и позволяет добавлять внутренние элементы,
кнопки и контент без нарушения структуры сетки.
.ui-resizable-handle Используется при
включённой опции перетаскивания и изменения размера
(resizable). Обеспечивает отображение “ручек”, которыми
пользователь может менять размеры виджета. В зависимости от направления
могут добавляться модификаторы:
.ui-resizable-e — правая сторона.ui-resizable-s — нижняя сторона.ui-resizable-se — нижний правый угол.ui-draggable Класс, который
добавляется к виджетам, если включена возможность их перетаскивания.
Позволяет перетаскивать элемент по сетке без нарушения соседних
виджетов. Совмещается с .grid-stack-item для корректного
поведения drag-and-drop.
.ui-draggable-dragging Временный класс,
который появляется при активном перетаскивании элемента. Используется
для стилизации перетаскиваемого виджета, например, добавления тени или
изменения прозрачности.
.placeholder Появляется при
перетаскивании виджета, чтобы показать потенциальное место его
установки. Этот класс управляет размерами и положением временного блока,
который занимает пространство перемещаемого виджета.
.grid-stack-empty Добавляется к
ячейкам, которые в данный момент не содержат виджетов. Позволяет
визуально отличать пустые участки сетки, особенно при динамическом
добавлении и удалении элементов.
.grid-stack-item-removed Присваивается
виджету при удалении, до момента окончательного удаления из DOM.
Используется для анимаций скрытия и плавного удаления элемента.
.grid-stack-vertical Используется для
вертикальных сеток с фиксированной шириной колонок и динамической
высотой строк. Управляет поведением выравнивания виджетов по
вертикали.
.grid-stack-horizontal Класс для
горизонтальной сетки. Элемент с этим классом располагает виджеты в
строках и управляет горизонтальным переносом элементов.
.grid-stack-auto-height Позволяет
контейнеру автоматически подстраивать высоту под содержимое. Класс
активно используется при динамическом добавлении виджетов без
необходимости вручную вычислять размеры.
.grid-stack-auto-width Обеспечивает
автоматическую подстройку ширины контейнера под количество колонок и их
размеры. Особенно актуален для адаптивных интерфейсов с изменяемой
шириной окна.
.ui-resizable-disabled Применяется к
виджетам, у которых отключено изменение размера. Позволяет отличить
статические элементы от интерактивных.
.ui-draggable-disabled Класс,
обозначающий виджеты, которые нельзя перемещать. Используется вместе с
.grid-stack-item для задания неподвижных блоков.
.grid-stack-item-moving Временный
класс, который появляется при начале перетаскивания и исчезает после
завершения. Часто используется для анимаций или визуального выделения
перемещаемого блока.
.grid-stack-item-resizing Добавляется
во время изменения размеров виджета. Позволяет стилизовать элемент в
процессе ресайза, например, изменяя рамку или фон.
.grid-stack-placeholder Используется
внутри .placeholder для точного отображения размеров
будущего виджета. Может содержать внутренние элементы для визуальной
подсказки.
.grid-stack-dragging Применяется к
контейнеру .grid-stack во время перетаскивания любого
виджета. Помогает применять глобальные стили, например, затемнение сетки
или блокировку других действий.
.grid-stack-resizing Класс для
контейнера, когда какой-либо элемент изменяет размер. Используется для
управления перерисовкой и предотвращения конфликта соседних
виджетов.
.grid-stack-placeholder-content
Внутренний блок временного виджета .placeholder, который
может содержать мини-элементы, надписи или индикаторы размеров.