Радиокнопки

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

Создание радиокнопок с помощью SweetAlert

Для создания модального окна с радиокнопками используется метод Swal.fire(), в котором можно указать тип input: 'radio' и задать список вариантов. Каждый вариант будет представлен как радиокнопка, и пользователь сможет выбрать только один из них.

Swal.fire({
  title: 'Выберите опцию',
  input: 'radio',
  inputOptions: {
    'option1': 'Вариант 1',
    'option2': 'Вариант 2',
    'option3': 'Вариант 3'
  },
  inputValidator: (value) => {
    if (!value) {
      return 'Выберите один из вариантов!';
    }
  }
});

В данном примере создается модальное окно с тремя радиокнопками, каждая из которых имеет уникальное значение (option1, option2, option3). Пользователь может выбрать только один из вариантов. Если пользователь не выбрал вариант и попытался подтвердить выбор, сработает функция inputValidator, которая вернет ошибку.

Параметры радиокнопок

  1. inputOptions – объект, в котором задаются значения радиокнопок. Каждому значению можно присвоить строку, которая будет отображаться пользователю.

    inputOptions: {
  'option1': 'Вариант 1',
  'option2': 'Вариант 2',
  'option3': 'Вариант 3'
}

    В данном примере у нас три варианта, где ключи (option1, option2, option3) – это внутренние идентификаторы значений, а значения строк (Вариант 1, Вариант 2, Вариант 3) – то, что будет видно пользователю.

  2. inputValue – задает выбранное значение по умолчанию. Например, если необходимо, чтобы по умолчанию был выбран второй вариант, можно использовать этот параметр:

    inputValue: 'option2'

  3. inputValidator – функция для проверки введенного значения или выбора пользователя. Она вызывается, когда пользователь пытается подтвердить свой выбор, и если валидация не пройдена, окно останется открытым, пока пользователь не сделает выбор.

    inputValidator: (value) => {
  if (!value) {
    return 'Выберите вариант!';
  }
}

Обработка данных

После того как пользователь сделает выбор, выбранное значение можно получить через промис. В случае успеха промис вернет объект, содержащий выбранное значение. Пример обработки данных:

Swal.fire({
  title: 'Выберите опцию',
  input: 'radio',
  inputOptions: {
    'option1': 'Вариант 1',
    'option2': 'Вариант 2',
    'option3': 'Вариант 3'
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Вы выбрали:', result.value);
  }
});

В этом примере, если пользователь выбрал один из вариантов и подтвердил свой выбор, в консоль будет выведено выбранное значение. Это значение соответствует ключу в объекте inputOptions (например, option1, option2 или option3).

Динамическое изменение списка вариантов

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

Swal.fire({
  title: 'Выберите опцию',
  input: 'radio',
  inputOptions: {
    'option1': 'Вариант 1',
    'option2': 'Вариант 2'
  }
}).then(() => {
  Swal.fire({
    title: 'Новые варианты',
    input: 'radio',
    inputOptions: {
      'option1': 'Вариант 1',
      'option2': 'Вариант 2',
      'option3': 'Вариант 3'
    }
  });
});

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

Советы по использованию

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

  • Удобство UI. Радиокнопки подходят для небольшого числа вариантов, но если их будет слишком много, лучше использовать другие элементы управления, такие как выпадающие списки.

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

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

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

Swal.fire({
  title: 'Выберите изображение',
  input: 'radio',
  inputOptions: {
    'img1': '<img src="image1.jpg" alt="Изображение 1" style="width: 100px;">',
    'img2': '<img src="image2.jpg" alt="Изображение 2" style="width: 100px;">'
  }
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Вы выбрали изображение:', result.value);
  }
});

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

Заключение

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

Оглавление