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

Настройка ящика

Начнем с опций. Что мы можем настроить? Больше вещей, чем вы можете себе представить. Здесь я расскажу только о самых важных параметрах. Полный список см. в Документации по библиотеке JavaScript.

  • TitleText: это заголовок вашего блока в виде текста (поэтому HTML не работает). Если вы хотите использовать HTML внутри, просто используйте вместо этого Title.
  • Текст: описание поля. Если вы хотите использовать HTML внутри описания, используйте Html вместо Text.
  • Тип: тип ящика. Он определяет значок поля. Это может быть предупреждение, успех, информация, вопрос и ошибка.
  • Ввод: первая интересная часть. Поле может содержать поля ввода следующих типов: текст, электронная почта, пароль, номер, телефон, диапазон, текстовое поле, выбор, радио, флажок, файл и URL-адрес.
  • InputValidator: вы можете добавить валидатор ввода. Он должен вернуться с SweetAlertProm. (об этом чуть позже)
  • ImageUrl: если вам не нравятся какие-либо значки по умолчанию или вам нужно что-то другое, вы можете вместо этого использовать собственный значок. В этом случае можно указать размер значка с помощью ImageWidth и ImageHeight.

Вы можете установить необходимые конфигурации, создав экземпляр объекта Box и задав его значения.

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

let WarningBox = 
    Box(
        Title = "Warning!",
        Text = "You are about to close this window!",
        Type = "warning",
        AllowOutsideClick = false,
        ShowCancelButton = true
    )

Хорошо, у нас есть Box с необходимыми атрибутами. Что теперь? Ну, мы должны показать это пользователю. Именно это и делает функция SweetAlert.ShowBox.

Вот и все? Не совсем. ShowBox показывает переданный блок, но после этого возвращает объект SweetAlertProm. Некоторым из вас Promise из JavaScript покажется знакомым, в основном SweetAlertProm — это Promise. Для тех, кто не знает, что такое промисы, я рекомендую ознакомиться с документацией MDN.
Если вы просто хотите показать простое информационное или предупреждающее окно, вы не будете часто использовать возвращаемый SweetAlertProm, поэтому вы можете просто сделать это:

SweetAlert.ShowBox WarningBox |> ignore

В следующем разделе мы будем использовать их.

Ящики с полями ввода

Да, ты можешь это сделать. Типы полей ввода могут быть следующими: текст, электронная почта, пароль, номер, телефон, диапазон, текстовое поле, выбор, радио, флажок, файл и URL-адрес.

Сначала давайте настроим новый Box:

let InputBox =
    Box (
        TitleText= "Hey there",
        Text = "How can I call you?",
        Type = "question",
        Input = "text"
    )

После этого нам нужно будет использовать ShowBox, чтобы сделать его видимым. Как я уже говорил, функция вернет значение SweetAlertProm, которое мы будем использовать для получения пользовательского ввода.

let rName = Var.Create ""
SweetAlert.ShowBox(InputBox).Then(fun (result: string) -> rName.Value <- x)|> ignore

Если в начале вашего кода стоит open WebSharper.UI.Next.Notation, вы можете использовать rName := x вместо rName.Value <- x.

Ладно, что случилось? Сначала я создал новую реактивную переменную. Это будет содержать пользовательский ввод после его установки. Затем я сделал InputBox видимым для пользователя. Как только пользователь нажимает кнопку подтверждения, вызывается функция Then. Мы должны передать функцию Then. Эта функция будет работать с пользовательским вводом, в нашем случае она поместит его в реактивную переменную rName, так что я смогу использовать ее позже. Then возвращается с SweetAlertProm, поэтому, в конце концов, если мы не хотим делать с ним что-либо еще, мы можем ignore его.

Другие особенности

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

Фрагмент на Try WebSharper

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



Попробовать Websharper
Изменить описаниеtry.websharper.com