Работа с Next.js

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

Для начала работы с tingle.js необходимо установить её в проект. Это можно сделать через npm или загрузив библиотеку с официального сайта.

Для установки через npm выполните команду:

npm install tingle.js

Либо можно добавить ссылку на скрипт и стили в HTML-документ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>

Основы использования

Для того чтобы создать простое модальное окно, достаточно инициализировать объект tingle.modal() и вызвать его метод .open(). Модальное окно будет отображено на экране с плавной анимацией.

var modal = new tingle.modal({
  closeLabel: "Закрыть"
});

modal.setContent('<h1>Пример модального окна</h1><p>Содержимое окна.</p>');
modal.open();

Этот код создаст модальное окно с заголовком “Пример модального окна” и текстом “Содержимое окна”. Внешний вид окна уже будет стилизован по умолчанию.

Конфигурация модального окна

Tingle.js предоставляет несколько опций, которые позволяют настроить поведение и внешний вид модального окна. Основные из них:

  • closeLabel: текст на кнопке закрытия (по умолчанию — “Закрыть”).
  • cssClass: добавляет пользовательские классы для стилизации.
  • onClose: функция обратного вызова, которая срабатывает при закрытии окна.
  • sticky: флаг, который позволяет фиксировать окно на экране при скроллинге.

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

var modal = new tingle.modal({
  closeLabel: "Закрыть",
  cssClass: ['custom-modal', 'another-class'],
  sticky: true,
  onClose: function() {
    console.log("Модальное окно закрыто");
  }
});

modal.setContent('<h2>Моё кастомное окно</h2><p>Настроено с уникальным стилем.</p>');
modal.open();

Управление поведением окна

  • Закрытие окна Для закрытия модального окна используется метод .close(). Важно помнить, что закрытие не всегда должно быть активируемо пользователем напрямую. В некоторых случаях можно ограничить закрытие, например, с помощью флага sticky.
modal.close();
  • Открытие окна Метод .open() откроет окно с анимацией. Он также может быть использован с дополнительными параметрами для специфической настройки перехода.
modal.open();
  • Ожидание закрытия окна Для реализации логики, которая выполняется сразу после того, как окно закрыто, можно использовать событие onClose.
modal.onCl ose = function() {
  alert('Окно закрыто');
};

Адаптивность и стилизация

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

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

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

.custom-modal .tingle-modal {
  border-radius: 10px;
  background-color: #f8f8f8;
}

Работа с динамическим контентом

Tingle.js позволяет динамически менять содержимое окна. Для этого можно использовать метод .setContent(), который обновит внутреннее содержимое модального окна на лету. Это полезно, когда необходимо отображать различные данные в одном и том же модальном окне.

Пример:

var modal = new tingle.modal();
modal.setContent('<h2>Первоначальное содержимое</h2>');
modal.open();

// Через некоторое время меняем содержимое
setTimeout(function() {
  modal.setContent('<h2>Обновлённое содержимое</h2>');
}, 3000);

Работа с несколькими окнами

Если на странице требуется несколько модальных окон, tingle.js поддерживает создание и управление несколькими экземплярами модальных окон одновременно. При этом каждое окно работает независимо друг от друга.

var modal1 = new tingle.modal();
modal1.setContent('<h1>Первое окно</h1>');
modal1.open();

var modal2 = new tingle.modal();
modal2.setContent('<h1>Второе окно</h1>');
modal2.open();

Применение в рамках Next.js

Интеграция tingle.js в проект Next.js не вызывает сложностей. Главное — корректно подключить скрипты и стили в проект. Для этого можно использовать встроенные механизмы Next.js для добавления внешних ресурсов.

  1. Подключение стилей и скриптов через компонент Head:
import Head from 'next/head';

const MyPage = () => {
  return (
    <div>
      <Head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>
      </Head>
      <h1>Моя страница с модальным окном</h1>
    </div>
  );
};
  1. Использование tingle.js в компонентах:
import { useEffect } from 'react';

const ModalComponent = () => {
  useEffect(() => {
    const modal = new tingle.modal({
      closeLabel: "Закрыть"
    });

    modal.setContent('<h2>Контент модального окна</h2>');
    modal.open();
  }, []);

  return null;
};

export default ModalComponent;

Этот пример демонстрирует, как использовать библиотеку для создания модального окна при рендеринге компонента. useEffect гарантирует, что модальное окно откроется после загрузки компонента.

Заключение

Tingle.js — это лёгкий и гибкий инструмент для создания модальных окон, который идеально подходит для интеграции в проекты на JavaScript и Next.js. Благодаря простоте использования и множеству настроек, библиотека позволяет создавать стильные и функциональные окна с минимумом кода.

Оглавление