Стилизация футера и заголовка

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

Структура модального окна

Модальное окно, созданное с помощью Tingle.js, по умолчанию состоит из нескольких ключевых элементов:

  • Заголовок — обычно используется для отображения наименования модального окна или описания текущего действия.
  • Основной контент — область, где отображается информация, форма или другой контент.
  • Футер — обычно используется для кнопок действий, таких как “Отменить”, “Подтвердить”, “Закрыть” и т. п.

Модальное окно имеет стандартные стили, но для интеграции в дизайн сайта может потребоваться стилизация этих частей.

Стилизация заголовка

Заголовок модального окна — это элемент с классом .tingle-modal__header, который используется для отображения заголовка. Чтобы изменить его внешний вид, можно использовать стандартные CSS-свойства.

Пример стилизации заголовка:

.tingle-modal__header {
    background-color: #4CAF50; /* Зеленый фон */
    color: white;              /* Белый текст */
    font-size: 1.5em;          /* Увеличенный шрифт */
    font-weight: bold;         /* Полужирный шрифт */
    text-align: center;        /* Центрирование текста */
    padding: 20px;             /* Отступы */
}

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

Стилизация футера

Футер модального окна, который отвечает за размещение кнопок или других управляющих элементов, можно стилизовать с помощью класса .tingle-modal__footer. В нем обычно располагаются кнопки подтверждения, отмены и закрытия окна.

Пример стилизации футера:

.tingle-modal__footer {
    background-color: #f1f1f1; /* Светлый фон */
    padding: 15px 20px;         /* Отступы */
    text-align: right;          /* Выравнивание кнопок по правому краю */
}

.tingle-modal__footer button {
    background-color: #007bff;  /* Синий фон кнопок */
    color: white;               /* Белый текст на кнопках */
    border: none;               /* Убираем обводку */
    padding: 10px 20px;         /* Отступы для кнопок */
    margin-left: 10px;          /* Отступ между кнопками */
    border-radius: 5px;         /* Скругленные углы */
    cursor: pointer;            /* Указатель при наведении */
}

.tingle-modal__footer button:hover {
    background-color: #0056b3;  /* Темно-синий цвет при наведении */
}

В данном примере футер получает светлый фон с отступами, кнопки размещаются по правому краю, а сами кнопки стилизуются с синим фоном и скругленными углами. При наведении на кнопку цвет меняется на темно-синий, что создаёт эффект интерактивности.

Добавление кастомных элементов в заголовок и футер

Tingle.js предоставляет возможность добавлять собственные элементы в заголовок и футер через API библиотеки.

Добавление пользовательского контента в заголовок:

const modal = new tingle.modal();

// Добавление собственного контента в заголовок
modal.setHeaderContent('<h1>Мой Заголовок</h1><p>Подзаголовок или описание</p>');

Добавление пользовательских кнопок в футер:

modal.addFooterBtn('Подтвердить', 'tingle-btn tingle-btn--primary', function () {
    console.log('Подтвердить');
    modal.close();
});

modal.addFooterBtn('Отменить', 'tingle-btn tingle-btn--secondary', function () {
    console.log('Отменить');
    modal.close();
});

В этом примере добавляются две кнопки в футер с кастомными надписями и действиями. Важно, что для каждого элемента футера необходимо задавать соответствующий класс для стилей (например, tingle-btn--primary для основной кнопки и tingle-btn--secondary для второстепенной).

Использование иконок в заголовке и футере

Для улучшения визуального восприятия можно добавить иконки в заголовок и футер. Для этого можно использовать библиотеки, такие как Font Awesome или Material Icons.

Пример добавления иконок:

modal.setHeaderContent('<i class="fa fa-info-circle"></i> Информация');
modal.addFooterBtn('<i class="fa fa-check"></i> Подтвердить', 'tingle-btn tingle-btn--primary', function () {
    console.log('Подтвердить');
    modal.close();
});

В данном примере иконка информации добавляется в заголовок, а иконка галочки — в кнопку футера. Для этого используется класс иконки из библиотеки Font Awesome.

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

Полная стилизация заголовка и футера с использованием кастомного контента:

.tingle-modal__header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

.tingle-modal__footer {
    background-color: #f7f7f7;
    padding: 15px 20px;
    text-align: center;
}

.tingle-modal__footer button {
    background-color: #28a745;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    margin: 0 10px;
}

.tingle-modal__footer button:hover {
    background-color: #218838;
}
const modal = new tingle.modal({
    closeLabel: "Закрыть"
});

// Настройка заголовка с кастомным контентом
modal.setHeaderContent('<h1>Модальное окно с иконкой</h1>');

// Добавление кнопок в футер
modal.addFooterBtn('<i class="fa fa-check"></i> Подтвердить', 'tingle-btn tingle-btn--primary', function () {
    modal.close();
});
modal.addFooterBtn('<i class="fa fa-times"></i> Отменить', 'tingle-btn tingle-btn--secondary', function () {
    modal.close();
});

В этом примере стилизованное окно имеет тёмный заголовок с белым текстом, светлый футер с кнопками, которые меняют цвет при наведении. В футер добавлены кнопки с иконками для улучшения визуального восприятия.

Заключение

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

Оглавление