Создание собственных тем

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

Основы структуры темы

Для начала следует понять, как работают стили в Tingle.js. Вся стилизация модальных окон реализована через CSS. Библиотека поставляется с базовыми стилями, которые можно кастомизировать, не изменяя исходный код. Ключевым моментом является использование классов для различных частей модального окна. Каждый элемент, такой как фон, контейнер окна, кнопки и текст, имеет свои специфические CSS классы.

Для создания собственной темы нужно создать новый CSS-файл и подключить его к странице, где используется Tingle.js. В этом файле прописываются стили для соответствующих классов, позволяя изменять визуальные характеристики.

Пример базовой структуры темы

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

/* Тема для модального окна */
.tingle-modal {
  background-color: #333;
  border-radius: 8px;
  font-family: 'Arial', sans-serif;
}

/* Стили для фона модального окна */
.tingle-modal .tingle-modal__overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* Стили для контента */
.tingle-modal .tingle-modal__content {
  color: #fff;
  padding: 20px;
}

/* Стили для кнопок */
.tingle-modal .tingle-modal__close {
  background-color: #ff5722;
  color: #fff;
  border-radius: 4px;
}

.tingle-modal .tingle-modal__close:hover {
  background-color: #e64a19;
}

Этот файл можно подключить в HTML-документ:

<link rel="stylesheet" href="path/to/your/custom-theme.css">

Теперь модальное окно будет отображаться с изменённым фоном, шрифтом и цветами кнопок. Это базовый пример, который можно расширить в зависимости от требований проекта.

Использование кастомных тем с JavaScript

Чтобы использовать кастомные стили в Tingle.js, достаточно создать экземпляр модального окна и подключить к нему соответствующую тему через класс. Например, можно создать функцию для инициализации модального окна с кастомной темой:

var modal = new tingle.modal({
  closeMethods: ['overlay', 'button'],
  cssClass: ['custom-theme'] // Добавление пользовательского класса
});

modal.setContent('<h1>Ваше сообщение</h1><p>Текст внутри модального окна</p>');
modal.open();

В данном примере CSS класс custom-theme добавляется к модальному окну, что позволяет ему применять стили, определённые в файле темы. При этом сам JavaScript не требует значительных изменений.

Расширенные возможности кастомизации

  1. Тёмная тема Один из самых популярных вариантов кастомизации — это создание тёмной темы для модальных окон. Для этого можно изменить цвет фона окна и элементов управления, а также текстовые цвета:

    .tingle-modal {
  background-color: #121212;
  color: #fff;
}

.tingle-modal .tingle-modal__close {
  background-color: #6200ea;
  color: #fff;
}

.tingle-modal .tingle-modal__content {
  color: #bbb;
}

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

  2. Анимации и переходы Для улучшения пользовательского опыта можно добавить плавные анимации при открытии и закрытии модальных окон. Tingle.js поддерживает анимации с помощью CSS, что позволяет сделать интерфейс более динамичным.

    Пример анимации открытия:

    .tingle-modal {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

    В этом примере добавляется анимация для плавного появления модального окна.

  3. Кастомизация кнопок и других элементов В Tingle.js можно кастомизировать не только фон и текст, но и элементы управления, такие как кнопки. Например, можно задать индивидуальные стили для кнопок закрытия или создания пользовательских кнопок с помощью addFooterBtn.

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

    var customButton = modal.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--primary');
customButton.addEventListener('click', function() {
  modal.close();
});

    К кнопке можно применить любой стиль, используя классы. В данном примере создаётся кнопка с классом tingle-btn--primary, который можно дополнительно кастомизировать через CSS.

Важные моменты при создании темы

  1. Согласованность с общим дизайном При создании кастомной темы важно придерживаться общих принципов дизайна сайта, чтобы модальное окно гармонично вписывалось в пользовательский интерфейс.

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

    @media (max-width: 768px) {
  .tingle-modal {
    width: 90%;
    margin: 0 auto;
  }
}

  3. Совместимость с браузерами Не все браузеры одинаково поддерживают CSS-свойства, поэтому рекомендуется тестировать тему на различных устройствах и браузерах. Важно удостовериться, что все стили корректно отображаются на всех поддерживаемых платформах.

Заключение

Создание собственных тем для Tingle.js — это мощный способ адаптировать модальные окна под уникальный дизайн проекта. Используя возможности CSS для стилизации различных элементов, можно значительно улучшить внешний вид и функциональность модальных окон, создавая визуально привлекательный интерфейс.

Оглавление