Как изменить цвет сфокусированной / нажатой кнопки в Sweet Alert 2? - PullRequest
Новая
       11

Как изменить цвет сфокусированной / нажатой кнопки в Sweet Alert 2?

0 голосов
/ 09 ноября 2018

Для всплывающего окна подтверждения Sweet Alert 2, если для атрибута «allowEnterKey» задано значение «истина» (по умолчанию), кнопка подтверждения автоматически фокусируется при всплывающем окне. Кроме того, цвет этой кнопки будет отличаться от ее обычного цвета (например, цвет, когда она не сфокусирована или не нажата)

С другой стороны, если я установлю «allowEnterKey» в значение false, эта кнопка не будет выделена, и цвет будет обычным цветом. Но пользователи не смогут закрыть окно, нажав клавишу Enter, что для меня не идеально.

Итак, как мне изменить цвет кнопки на ее обычный цвет, когда она сфокусирована?

Пример всплывающего окна подтверждения, в котором кнопка выделена серым цветом вместо обычного синего цвета

1 Ответ

0 голосов
/ 09 ноября 2018

Документация определяет параметры цвета: confirmButtonColor и cancelButtonColor. 

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

Если этого недостаточно, вы также можете применять пользовательские классы CSS, например: 

confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
...