Типы кнопок и их классы

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

Основные типы кнопок

Tingle.js предоставляет несколько типов кнопок для работы с модальными окнами. Основные типы:

  1. Закрывающая кнопка Закрывающая кнопка — это стандартная кнопка, которая обычно используется для закрытия модального окна. Она появляется в верхнем правом углу окна по умолчанию, но может быть перемещена в зависимости от настроек.

  2. Основная кнопка Это кнопка, которая обычно используется для подтверждения действий пользователя. Например, кнопка «ОК» или «Сохранить». Она часто располагается в нижней части модального окна.

  3. Второстепенная кнопка Второстепенная кнопка используется для действий, которые не являются основными. Это могут быть кнопки «Отмена», «Отложить» и другие, которые предоставляют пользователю возможность выполнить альтернативное действие.

Классы для кнопок

Tingle.js использует различные CSS классы для стилизации кнопок и их взаимодействий. Эти классы могут быть добавлены при создании кнопок через API библиотеки или вручную через CSS.

Основной класс кнопки

Для всех кнопок в Tingle.js используется базовый класс tingle-modal__close или tingle-modal__button. Эти классы отвечают за общую стилизацию кнопок. Они могут быть дополнены дополнительными классами, которые указывают на роль кнопки.

Классы для закрывающих кнопок

Закрывающая кнопка имеет класс tingle-modal__close. Этот класс отвечает за внешний вид и позиционирование кнопки. Базовый стиль кнопки можно изменить с помощью дополнительного класса, например, tingle-modal__close--custom, который позволяет применить пользовательскую стилизацию.

Классы для основной кнопки

Для основной кнопки используется класс tingle-modal__footer__btn--primary. Это класс, который определяет стили для основной кнопки внизу модального окна. С помощью этого класса кнопка может быть выделена среди других кнопок, что подчеркивает её важность.

Классы для второстепенных кнопок

Для второстепенных кнопок используется класс tingle-modal__footer__btn--secondary. Кнопки этого типа обычно имеют более нейтральный или менее яркий стиль, чтобы обозначить их менее важную роль по сравнению с основной кнопкой.

Настройка кнопок через API

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

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

var modal = new tingle.modal();

// Добавляем основную кнопку
modal.addFooterBtn('Подтвердить', 'tingle-modal__footer__btn--primary', function() {
  console.log('Основная кнопка нажата');
});

// Добавляем второстепенную кнопку
modal.addFooterBtn('Отмена', 'tingle-modal__footer__btn--secondary', function() {
  console.log('Второстепенная кнопка нажата');
});

В этом примере создаются две кнопки: одна с классом tingle-modal__footer__btn--primary, а другая с классом tingle-modal__footer__btn--secondary. Первая кнопка будет основным действием, а вторая — дополнительным, альтернативным.

Взаимодействие с кнопками

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

Пример с привязкой событий:

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

В этом случае при нажатии на кнопку «Закрыть» модальное окно будет закрыто.

Кастомизация кнопок

Tingle.js предоставляет достаточно гибкости для кастомизации кнопок. Разработчики могут не только использовать стандартные классы, но и добавлять собственные, например:

  • Изменение цвета и размера кнопок с помощью дополнительных классов.
  • Добавление иконок на кнопки, используя ::before или ::after в CSS.
  • Изменение положения кнопок, например, выравнивание их по центру или сдвиг влево/вправ.

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

.tingle-modal__footer__btn--primary {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}

.tingle-modal__footer__btn--secondary {
  background-color: #f44336;
  color: white;
  font-size: 14px;
  border-radius: 5px;
}

Заключение

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

Оглавление