Фокус на кнопках

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

Стандартные кнопки

SweetAlert предоставляет стандартные кнопки, такие как «ОК» и «Отмена», которые можно легко интегрировать в окно с помощью простых опций. По умолчанию, когда вы не указываете дополнительные параметры, в модальном окне появляется кнопка «ОК», и это действие выполняется, когда пользователь нажимает её.

Пример создания окна с одной кнопкой:

Swal.fire({
  title: 'Простое сообщение',
  text: 'Нажмите ОК, чтобы продолжить',
  icon: 'info'
});

Однако возможность кастомизации SweetAlert позволяет менять текст кнопок и их поведение, что даёт разработчику гибкость в управлении пользовательским интерфейсом.

Настройка текста кнопок

По умолчанию кнопка имеет стандартный текст, однако этот параметр можно легко изменить. В SweetAlert используется свойство confirmButtonText для задания текста кнопки подтверждения и cancelButtonText для кнопки отмены. Эти опции позволяют точно настроить внешний вид кнопок в модальном окне.

Пример с изменённым текстом кнопок:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие нельзя отменить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отменить'
});

В данном примере кнопки изменены, и текст на них отражает действие, которое будет выполнено при их нажатии. Также стоит отметить параметр showCancelButton, который делает кнопку отмены видимой, если она необходима.

Типы кнопок

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

Пример обработки кнопки:

Swal.fire({
  title: 'Удалить файл?',
  text: 'Эти данные невозможно восстановить.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Удалить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.isConfirmed) {
    // Выполняем действия по удалению файла
    console.log('Файл удалён');
  }
});

В этом примере после нажатия кнопки «Удалить» можно выполнить дополнительные действия, такие как вызов API или изменение состояния приложения.

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

SweetAlert также даёт возможность изменять внешний вид кнопок через CSS. Для этого можно использовать классы, связанные с кнопками, например, .swal2-confirm для кнопки подтверждения и .swal2-cancel для кнопки отмены. Эти классы позволяют менять стиль кнопок по умолчанию, например, цвета, шрифт или размеры.

Пример кастомизации кнопок с использованием CSS:

.swal2-confirm {
  background-color: #3085d6;
  border-radius: 5px;
  font-weight: bold;
}

.swal2-cancel {
  background-color: #aaa;
  border-radius: 5px;
  font-weight: bold;
}

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

Условное отображение кнопок

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

Пример с условным появлением кнопки:

let actionCompleted = true;

Swal.fire({
  title: 'Завершить действие?',
  text: 'Нажмите кнопку, если хотите завершить.',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да, завершить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (actionCompleted && result.isConfirmed) {
    Swal.fire('Завершено', 'Ваше действие завершено успешно.', 'success');
  }
});

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

Синхронное и асинхронное поведение кнопок

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

Пример с асинхронным запросом:

async function deleteFile() {
  const result = await Swal.fire({
    title: 'Удалить файл?',
    text: 'Вы уверены, что хотите удалить этот файл?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Да, удалить',
    cancelButtonText: 'Отменить'
  });

  if (result.isConfirmed) {
    Swal.showLoading();
    try {
      await performDeleteAction(); // Вызов асинхронной функции
      Swal.fire('Удалено', 'Файл был успешно удалён.', 'success');
    } catch (error) {
      Swal.fire('Ошибка', 'Не удалось удалить файл.', 'error');
    }
  }
}

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

Заключение

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

Оглавление