CurrieTechnologies.Blazor.SweetAlert2
0.2.1-preview
See the version list below for details.
dotnet add package CurrieTechnologies.Blazor.SweetAlert2 --version 0.2.1-preview
NuGet\Install-Package CurrieTechnologies.Blazor.SweetAlert2 -Version 0.2.1-preview
<PackageReference Include="CurrieTechnologies.Blazor.SweetAlert2" Version="0.2.1-preview" />
paket add CurrieTechnologies.Blazor.SweetAlert2 --version 0.2.1-preview
#r "nuget: CurrieTechnologies.Blazor.SweetAlert2, 0.2.1-preview"
// Install CurrieTechnologies.Blazor.SweetAlert2 as a Cake Addin #addin nuget:?package=CurrieTechnologies.Blazor.SweetAlert2&version=0.2.1-preview&prerelease // Install CurrieTechnologies.Blazor.SweetAlert2 as a Cake Tool #tool nuget:?package=CurrieTechnologies.Blazor.SweetAlert2&version=0.2.1-preview&prerelease
<p align="center"> <span style="font-size:x-large">Client-side Blazor</span> <br> + <br> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/swal2-logo.png" alt="SweetAlert2"> </a> </p>
<p align="center"> A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. </p>
<p align="center"> <a href="https://sweetalert2.github.io/"> <img src="https://raw.github.com/sweetalert2/sweetalert2/master/assets/sweetalert2.gif" width="562"><br> See SweetAlert2 in action ↗ </a> </p>
This package is for Client-side Blazor only. For Server-side Blazor use CurrieTechnologies.Razor.SweetAlert2
🙌 Includes themes from the Official SweetAlert2 Themes project 🙌
Installation
Install-Package CurrieTechnologies.Blazor.SweetAlert2 --IncludePrerelease
Or grab from Nuget
Usage
Register the service in your Startup file.
// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
services.AddSweetAlert2();
...
}
OR
If you want to use one of the Official SweetAlert2 themes
// Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...
services.AddSweetAlert2(options => {
options.Theme = SweetAlertTheme.Dark;
});
...
}
Inject the SweetAlertService into any Blazor component
// Sample.razor
@inject SweetAlertService Swal;
<button class="btn btn-primary"
@onclick="@(async () => await Swal.FireAsync("Any fool can use a computer"))">
Try me!
</button>
Examples
The most basic message:
await Swal.FireAsync("Hello world!");
A message signaling an error:
await Swal.FireAsync("Oops...", "Something went wrong!", "error");
Handling the result of SweetAlert2 modal:
// async/await
SweetAlertResult result = await Swal.FireAsync(new SweetAlertOptions
{
Title = "Are you sure?",
Text = "You will not be able to recover this imaginary file!",
Type = SweetAlertType.Warning,
ShowCancelButton = true,
ConfirmButtonText = "Yes, delete it!",
CancelButtonText = "No, keep it"
});
if (!string.IsNullOrEmpty(result.Value))
{
await Swal.FireAsync(
"Deleted",
"Your imaginary file has been deleted.",
SweetAlertType.Success
);
}
else if (result.Dismiss == DismissReason.Cancel)
{
await Swal.FireAsync(
"Cancelled",
"Your imaginary file is safe :)",
SweetAlertType.Error
);
}
// Promise/Task based
Swal.FireAsync(new SweetAlertOptions
{
Title = "Are you sure?",
Text = "You will not be able to recover this imaginary file!",
Type = SweetAlertType.Warning,
ShowCancelButton = true,
ConfirmButtonText = "Yes, delete it!",
CancelButtonText = "No, keep it"
}).ContinueWith(swalTask =>
{
SweetAlertResult result = swalTask.Result;
if (!string.IsNullOrEmpty(result.Value))
{
Swal.FireAsync(
"Deleted",
"Your imaginary file has been deleted.",
SweetAlertType.Success
);
}
else if (result.Dismiss == DismissReason.Cancel)
{
Swal.FireAsync(
"Cancelled",
"Your imaginary file is safe :)",
SweetAlertType.Error
);
}
});
More examples can be found on the SweetAlert2 project site
Notable differences from the JavaScript library
- No methods that return an HTMLElement are included (e. g.
Swal.getContainer()
) - The value of a
SweetAlertResult
(result.Value
) can only be a string (or a collection of strings if returned from a queue request). Numbers and booleans must be converted. Object must be parsed to/from JSON in your code. OnOpenAsync()
,OnCloseAsync()
,OnBeforeOpenAsync()
, andOnAfterCloseAsync()
can all take asynchronous callbacks. 🎉 (none will return an HTMLElement though.)- All SweetAlert2 non-Promise returning methods are available through synchronous or asynchronous methods. (e.g.
Swal.ShowLoading()
andSwal.ShowLoadingAsync()
) - Callbacks must be passed inside of objects specifically designed for the given callback property. e.g. the
InputValidator
property takes anInputValidatorCallback
created like so:
new SweetAlertOptions {
...
InputValidator = new InputValidatorCallback((string input) => input.Length == 0 ? "Please provide a value" : null, this),
...
}
this
is passed in so that the Blazor EventCallback
used behind the scenes can trigger a re-render if the state of the calling component was changed in the callback. If the callback does not require the calling component to re-render, passing in this
is optional.
These callbacks are necessary because there is currently no way to create an EventCallback
in Blazor that isn't a component parameter without using the EventCallbackFactory
which is clunky. It also allows the callback to return a value that can be used by the SweetAlert2 library. (e.g. A validation message to show if input validation fails.) Native Blazor EventCallback
s only return generic Task
s.
Browser compatibility
Compatible with all browsers than can run WebAssembly and Blazor.
IE11 | Edge | Chrome | Firefox | Safari | Opera | UC Browser |
---|---|---|---|---|---|---|
❌ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ❌ |
Related projects
- SweetAlert2 - Original SweetAlert2 project
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net5.0 was computed. net5.0-windows was computed. net6.0 was computed. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
.NET Core | netcoreapp2.0 was computed. netcoreapp2.1 was computed. netcoreapp2.2 was computed. netcoreapp3.0 was computed. netcoreapp3.1 was computed. |
.NET Standard | netstandard2.0 is compatible. netstandard2.1 was computed. |
.NET Framework | net461 was computed. net462 was computed. net463 was computed. net47 was computed. net471 was computed. net472 was computed. net48 was computed. net481 was computed. |
MonoAndroid | monoandroid was computed. |
MonoMac | monomac was computed. |
MonoTouch | monotouch was computed. |
Tizen | tizen40 was computed. tizen60 was computed. |
Xamarin.iOS | xamarinios was computed. |
Xamarin.Mac | xamarinmac was computed. |
Xamarin.TVOS | xamarintvos was computed. |
Xamarin.WatchOS | xamarinwatchos was computed. |
-
.NETStandard 2.0
- Microsoft.AspNetCore.Components.Browser (>= 3.0.0-preview6.19307.2)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated | |
---|---|---|---|
0.3.0-preview | 796 | 7/24/2019 | |
0.2.3-preview | 330 | 7/15/2019 | |
0.2.2-preview | 292 | 7/9/2019 | |
0.2.1-preview | 278 | 6/26/2019 | |
0.2.0-preview | 286 | 6/17/2019 | |
0.1.4-preview | 404 | 6/14/2019 | |
0.1.3-preview | 304 | 6/14/2019 | |
0.1.1-preview | 298 | 6/14/2019 | |
0.1.0-preview | 291 | 6/13/2019 |
- Updated to SweetAlert2 8.13.0