SAPBlazorAlert 1.9.1

create alert and toast in blazor app without any js library with great animations.

Install-Package SAPBlazorAlert -Version 1.9.1
dotnet add package SAPBlazorAlert --version 1.9.1
<PackageReference Include="SAPBlazorAlert" Version="1.9.1" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add SAPBlazorAlert --version 1.9.1
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

SAPBlazorAlert

Full Css + Blazor Library for creating alert like SweetAlert without any js file.

Demo :

Demo CountPages alpha

Usage
  1. Add SAPBlazorAlert To Your Project
PM> Install-Package SAPBlazorAlert -Version 1.9.1
  1. Add stylesheets either in your _host.cshtml (server-side blazor) or index.html (client-side blazor)
<link href="_content/SAPBlazorAnimate/animate.min.css" rel="stylesheet" />
<link href="_content/SAPBlazorAlert/style.css" rel="stylesheet" />

TIP : by adding this component , you will install another component that u can animate elements easy. More info at end of article.
  1. Add This Line in _imports.razor
@using SAPBlazorAlert
@using SAPBlazorAnimate

<hr />

Let's Create an alert :
<button class="btn btn-info" @onclick="() => this.Alert1.ShowAlert()">
    show alert 1
</button>

<SAPAlertBox @ref="Alert1"
             AlertBoxSize="SAPAlertBoxSize.Small"
             FooterText="created by SOROUSH ASADI"
             SAPAlertType="@SAPAlertType.Info"
             AnimationType="@AnimateBook.ZoomEntrances.ZoomIn.Fast()"
             Title="Normal Alert">
    <p>

        you can set your alert body here ,
        you can add buttons , or tables and any data u want.

        below you can add any action and event u want
    </p>
    <button @onclick="() => this.Alert1.HideAlert()" class="btn btn-info">
        Ok , i got it
    </button>

</SAPAlertBox>
Define a paremeter in code section for alert show control
@code{

    public SAPAlertBox Alert1;



}
what is AnimationType ?

you can set an animation for your alert reveal , for access to animation just use "@AnimationBook" static class.
you can pass animation reveal speed just after animation name.
if yout didnt select speed , it weill be at default.

Alert Types
None (doesnt show any image)
Info
Success
Danger
Warning
Custom ( you can set your img or svg on  CustomAlertTypeImage="")

<hr />

status

you can use Toast by this component

in your page register this element for toast container

<SAPToastArea 
              
              @ref="ToastArea"
              ToastAreatPosition="@SAPToastAreatPosition.Right"
              SAPToastDirection="SAPToastDirection.Column"
              AnimationType="@AnimateBook.Specials.JackInTheBox"
             >

</SAPToastArea>
Define a paremeter in code section for toast show control
@code{

    public SAPToastArea ToastArea;


}
To create toast use this method
@code{

    public SAPToastArea ToastArea;

    void CreateToast()
    {
        var toast = new SAPToast
        {
            Title = "sample text for toast , close after 10 sec",
            AlertType = SAPAlertType.Info,
            AutoCloseDelay= TimeSpan.FromSeconds(10)
        };

        ToastArea.CreateToast(toast);
    }

}

Related projects

this project used SAPBlazorAnimate (animate.css blazor version)

SAPBlazorAlert

Full Css + Blazor Library for creating alert like SweetAlert without any js file.

Demo :

Demo CountPages alpha

Usage
  1. Add SAPBlazorAlert To Your Project
PM> Install-Package SAPBlazorAlert -Version 1.9.1
  1. Add stylesheets either in your _host.cshtml (server-side blazor) or index.html (client-side blazor)
<link href="_content/SAPBlazorAnimate/animate.min.css" rel="stylesheet" />
<link href="_content/SAPBlazorAlert/style.css" rel="stylesheet" />

TIP : by adding this component , you will install another component that u can animate elements easy. More info at end of article.
  1. Add This Line in _imports.razor
@using SAPBlazorAlert
@using SAPBlazorAnimate

<hr />

Let's Create an alert :
<button class="btn btn-info" @onclick="() => this.Alert1.ShowAlert()">
    show alert 1
</button>

<SAPAlertBox @ref="Alert1"
             AlertBoxSize="SAPAlertBoxSize.Small"
             FooterText="created by SOROUSH ASADI"
             SAPAlertType="@SAPAlertType.Info"
             AnimationType="@AnimateBook.ZoomEntrances.ZoomIn.Fast()"
             Title="Normal Alert">
    <p>

        you can set your alert body here ,
        you can add buttons , or tables and any data u want.

        below you can add any action and event u want
    </p>
    <button @onclick="() => this.Alert1.HideAlert()" class="btn btn-info">
        Ok , i got it
    </button>

</SAPAlertBox>
Define a paremeter in code section for alert show control
@code{

    public SAPAlertBox Alert1;



}
what is AnimationType ?

you can set an animation for your alert reveal , for access to animation just use "@AnimationBook" static class.
you can pass animation reveal speed just after animation name.
if yout didnt select speed , it weill be at default.

Alert Types
None (doesnt show any image)
Info
Success
Danger
Warning
Custom ( you can set your img or svg on  CustomAlertTypeImage="")

<hr />

status

you can use Toast by this component

in your page register this element for toast container

<SAPToastArea 
              
              @ref="ToastArea"
              ToastAreatPosition="@SAPToastAreatPosition.Right"
              SAPToastDirection="SAPToastDirection.Column"
              AnimationType="@AnimateBook.Specials.JackInTheBox"
             >

</SAPToastArea>
Define a paremeter in code section for toast show control
@code{

    public SAPToastArea ToastArea;


}
To create toast use this method
@code{

    public SAPToastArea ToastArea;

    void CreateToast()
    {
        var toast = new SAPToast
        {
            Title = "sample text for toast , close after 10 sec",
            AlertType = SAPAlertType.Info,
            AutoCloseDelay= TimeSpan.FromSeconds(10)
        };

        ToastArea.CreateToast(toast);
    }

}

Related projects

this project used SAPBlazorAnimate (animate.css blazor version)

Release Notes

create alert and toast in blazor app without any js library with great animations.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
1.9.1 146 2/12/2020
1.9.0 80 2/12/2020
1.4.1 126 2/8/2020
1.4.0 120 1/28/2020
1.3.0 100 1/25/2020
1.2.0 243 1/23/2020
1.1.0 81 1/23/2020
1.0.0 111 1/22/2020
0.1.0 89 1/22/2020
0.0.6 180 1/18/2020
0.0.5 166 1/18/2020
0.0.4 170 1/18/2020
0.0.3 111 1/18/2020
0.0.2 115 1/17/2020
0.0.1 96 1/17/2020