Темизация сетки

Темизация (theming) в библиотеке Muuri позволяет задавать внешний вид элементов сетки и управлять стилями их анимаций, поведения и состояний. В Muuri темизация реализуется через комбинацию CSS-классов, параметров анимации и настроек контейнера сетки. Основная цель — обеспечить визуальную согласованность сетки с остальной частью интерфейса, а также возможность динамического изменения внешнего вида без вмешательства в логику работы сетки.

Настройка CSS-классов для элементов сетки

Каждый элемент сетки в Muuri представляет собой HTML-элемент с классом контейнера и элементами внутри. Для темизации важно использовать:

  • Классы контейнера сетки (.muuri-grid) Определяют базовые параметры сетки: отступы, фон, рамки и размеры.

  • Классы элементов сетки (.muuri-item) Определяют стиль каждого блока, включая фон, тени, рамки и переходы при изменении положения.

  • Состояния элементов (.is-active, .is-dragging, .is-hidden) Позволяют управлять визуальными эффектами при различных состояниях, например при перетаскивании или фильтрации.

Пример CSS-темы для сетки:

.muuri-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  background-color: #f5f5f5;
  padding: 10px;
}

.muuri-item {
  width: 150px;
  height: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.muuri-item.is-dragging {
  opacity: 0.8;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

Эти классы создают базовую визуальную идентичность сетки и обеспечивают плавные переходы при изменении элементов.

Параметры анимации и их темизация

Muuri предоставляет широкие возможности для настройки анимации:

  • layout.duration — время анимации перестановки элементов.
  • layout.easing — тип функции сглаживания, например 'ease', 'ease-in-out'.
  • drag.sortDuration — длительность перестановки элементов при перетаскивании.
  • drag.sortEasing — функция сглаживания для перетаскивания.

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

Пример настройки сетки с кастомной анимацией:

const grid = new Muuri('.muuri-grid', {
  layout: {
    duration: 600,
    easing: 'cubic-bezier(0.25, 1, 0.5, 1)'
  },
  dragEnabled: true,
  dragSortDuration: 400,
  dragSortEasing: 'ease-out'
});

Динамическая смена тем

Muuri поддерживает динамическое обновление внешнего вида сетки без перезагрузки страницы. Основные методы:

  • Изменение CSS-класса контейнера: С помощью classList.add и classList.remove можно переключать темы, например светлую и тёмную:
const gridContainer = document.querySelector('.muuri-grid');
gridContainer.classList.toggle('dark-theme');
  • Обновление стилей элементов через Jav * aScript: Можно изменять параметры анимации и размеры элементов на лету:
grid.refreshItems().layout({
  duration: 800,
  easing: 'ease-in-out'
});
  • Смена цветов и визуальных эффектов через CSS-переменные: Использование --grid-item-bg или --grid-gap позволяет создавать полностью настраиваемые темы:
.muuri-grid {
  --grid-item-bg: #ffffff;
  --grid-gap: 16px;
}

.muuri-item {
  background-color: var(--grid-item-bg);
}

Состояния элементов и их визуальные стили

Muuri автоматически добавляет классы состояния для элементов, что позволяет темизировать их реакцию на действия пользователя:

  • .is-active — элемент выбран или находится в фокусе.
  • .is-dragging — элемент перетаскивается.
  • .is-hidden — элемент скрыт через фильтрацию.

Каждое состояние может иметь индивидуальные стили, создавая эффект живой интерактивной сетки. Например:

.muuri-item.is-hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.muuri-item.is-active {
  border: 2px solid #007bff;
}

Темизация сетки и адаптивность

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

@media (max-width: 768px) {
  .muuri-item {
    width: 100px;
    height: 100px;
  }
}

В сочетании с параметрами layout и drag, адаптивная темизация позволяет сетке выглядеть гармонично на всех устройствах.

Интеграция с внешними библиотеками стилей

Для расширенной темизации Muuri может интегрироваться с CSS-фреймворками (например, Tailwind, Bootstrap) или CSS-in-JS решениями. Это позволяет:

  • Использовать переменные цвета и типографику из глобальной темы.
  • Поддерживать глобальные переходы и анимации.
  • Легко менять тему всей страницы вместе с сеткой.

Пример с Tailwind:
Оглавление