Кастомизация внешнего вида кнопок

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

1. Стандартные кнопки Tingle.js

По умолчанию Tingle.js предоставляет стандартные кнопки для модальных окон, которые имеют простое оформление. Эти кнопки могут быть добавлены с помощью методов addFooterBtn() и addFooterBtn():

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

Кнопки получают два параметра:

  1. Текст кнопки.
  2. Классы CSS, которые определяют внешний вид кнопки (например, tingle-btn и tingle-btn--primary).

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

2. Применение собственных стилей

Для изменения внешнего вида кнопок можно воспользоваться возможностью написания собственных стилей. Для этого достаточно добавить новые CSS классы и применить их к кнопкам при их создании.

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

.my-custom-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.my-custom-btn:hover {
  background-color: #45a049;
}
modal.addFooterBtn('Подтвердить', 'my-custom-btn', function() {
  modal.close();
});

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

3. Использование нескольких кнопок

В некоторых случаях возникает необходимость добавить сразу несколько кнопок с различными стилями. Например, одна кнопка может быть для подтверждения действия, а другая — для отмены. Это можно реализовать с помощью метода addFooterBtn() несколько раз:

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

modal.addFooterBtn('Отмена', 'tingle-btn tingle-btn--secondary', function() {
  console.log('Действие отменено');
  modal.close();
});

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

4. Кастомизация с анимациями

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

Пример анимации для кнопки:

@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.bounce-btn {
  animation: bounce 0.5s ease;
}

.bounce-btn:hover {
  animation: bounce 0.5s ease;
}
modal.addFooterBtn('Успех', 'tingle-btn bounce-btn', function() {
  console.log('Успех!');
  modal.close();
});

В данном примере кнопка будет «прыгать» при наведении, что добавит интересный визуальный эффект.

5. Изображения и иконки на кнопках

Для улучшения восприятия и придания кнопкам уникальности можно добавить иконки или изображения. В Tingle.js это легко реализуется с помощью HTML-элементов в качестве содержимого кнопки.

Пример кнопки с иконкой:

<i class="fa fa-check-circle"></i> Подтвердить

Чтобы использовать иконки на кнопках, можно использовать библиотеки иконок, такие как Font Awesome. Для этого кнопке можно присвоить HTML-контент:

modal.addFooterBtn('<i class="fa fa-check-circle"></i> Подтвердить', 'tingle-btn tingle-btn--primary', function() {
  modal.close();
});

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

6. Респонсивность кнопок

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

Пример респонсивных кнопок:

@media (max-width: 600px) {
  .tingle-btn {
    font-size: 14px;
    padding: 8px 16px;
  }
}

@media (min-width: 601px) {
  .tingle-btn {
    font-size: 16px;
    padding: 10px 20px;
  }
}

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

7. Удаление кнопок

Если в какой-то момент требуется удалить кнопку из модального окна, это можно сделать с помощью метода removeFooterBtn(). Этот метод позволяет динамически управлять элементами в футере модального окна.

Пример удаления кнопки:

const btn = modal.addFooterBtn('Удалить', 'tingle-btn tingle-btn--danger', function() {
  modal.close();
});

btn.removeFooterBtn();

Метод removeFooterBtn() удаляет кнопку из футера, что полезно, если кнопка должна появляться или исчезать в зависимости от условий.

8. Динамическая кастомизация кнопок

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

Пример динамической кастомизации кнопок:

if (isConfirmed) {
  modal.addFooterBtn('Подтвердить', 'tingle-btn tingle-btn--success', function() {
    modal.close();
  });
} else {
  modal.addFooterBtn('Отмена', 'tingle-btn tingle-btn--secondary', function() {
    modal.close();
  });
}

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

9. Вывод

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

Оглавление