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

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

Стандартная настройка текста кнопок

По умолчанию в каждом окне SweetAlert есть две кнопки: «OK» и «Cancel». Эти кнопки можно настроить, указав текст, который будет отображаться на кнопках, а также изменить их стили и функционал. Основной параметр для изменения текста кнопок — это buttons.

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

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

Самый простой способ изменить текст кнопки — это передать строку в параметр buttons. Например, если требуется заменить текст кнопки «OK» на «Подтвердить», конфигурация будет выглядеть следующим образом:

swal({
  title: "Вы уверены?",
  text: "Вы не сможете вернуть изменения!",
  buttons: "Подтвердить"
});

В этом примере будет отображаться модальное окно с одной кнопкой, текст на которой будет “Подтвердить”. Это работает, если требуется изменить текст только одной кнопки, например, кнопки подтверждения.

Настройка текста нескольких кнопок

Когда требуется изменить текст обеих кнопок, передается объект с ключами text для каждой кнопки. Например:

swal({
  title: "Вы уверены?",
  text: "Вы не сможете вернуть изменения!",
  buttons: {
    cancel: "Отменить",
    confirm: "Подтвердить"
  }
});

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

Изменение текста кнопок в зависимости от ситуации

SweetAlert позволяет динамически изменять текст кнопок в зависимости от контекста. Это можно сделать через условия или в процессе выполнения определённых действий. Например, если в процессе выполнения операции пользователь должен подтвердить или отменить действие, текст кнопок может изменяться на лету:

let isConfirmed = false;

swal({
  title: "Продолжить?",
  text: "Вы хотите продолжить выполнение операции?",
  buttons: {
    cancel: "Отмена",
    confirm: isConfirmed ? "Продолжить" : "Начать"
  }
});

Здесь текст кнопки будет зависеть от состояния переменной isConfirmed, что позволяет адаптировать поведение интерфейса в реальном времени.

Использование кастомных кнопок с HTML-разметкой

Иногда требуется не только изменить текст, но и использовать более сложное форматирование для кнопок. Это можно сделать с помощью HTML-разметки. Например:

swal({
  title: "Действие завершено",
  text: "Пожалуйста, выберите действие:",
  buttons: {
    cancel: "<b>Закрыть</b>",
    confirm: "<i>Посмотреть результаты</i>"
  }
});

В данном примере для кнопок используется элемент <b> для выделения текста «Закрыть» и элемент <i> для курсивного текста «Посмотреть результаты». Такая настройка позволяет добавить элементарное форматирование, чтобы подчеркнуть важность некоторых кнопок.

Изменение стилей кнопок

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

swal({
  title: "Вы хотите продолжить?",
  text: "Подтвердите ваше действие.",
  buttons: {
    cancel: {
      text: "Отменить",
      className: "btn-danger"
    },
    confirm: {
      text: "Подтвердить",
      className: "btn-primary"
    }
  }
});

В этом примере для кнопок добавляются классы btn-danger и btn-primary, что может быть полезно, если используются стандартные стили, например, из библиотеки Bootstrap. Это позволяет легко интегрировать SweetAlert с другими элементами интерфейса.

Ожидание действий на кнопках

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

swal({
  title: "Сохранить изменения?",
  text: "Вы хотите сохранить текущие изменения?",
  buttons: {
    cancel: "Отменить",
    confirm: "Сохранить"
  }
}).then((value) => {
  if (value) {
    swal("Изменения сохранены!");
  } else {
    swal("Изменения не сохранены.");
  }
});

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

Псевдокнопка для закрытия окна

Ещё одна полезная функция — это использование пустых или скрытых кнопок для закрытия окна. В этом случае можно использовать параметр closeOnClickOutside для управления поведением кнопки закрытия окна. Например, кнопка с текстом «Закрыть» может быть сделана невидимой или её можно вообще не отображать:

swal({
  title: "Операция завершена",
  text: "Нажмите вне окна, чтобы закрыть.",
  buttons: {
    cancel: null,
    confirm: null
  },
  closeOnClickOutside: true
});

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

Итог

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

Оглавление