Home

Sample site: https://zxyao145.github.io/ByNotice/

Quick Start

1. Install ByNotice from nuget

Install-Package ByNotice

2. Add css to the html.

<link rel="stylesheet" href="/_content/ByNotice/bynotice.css" />

3. Add namespace declaration in "_Imports.razor".

@using ByNotice

4. Injection service

builder.Services.AddByNotice();

5. Add component "Notice" in "MainLayout.razor" (or whatever you want to use).

<Notice />

6. notify a message

@inject NoticeService NoticeService
    
await NoticeService.NotifyAsync(new NoticeOption()
{
    Message = "here is the message",
    Title = "here is tite"
});

you can use NoticeService.NotifyInfoAsync, NoticeService.NotifySuccessAsync, NoticeService.NotifyWarningAsync, NoticeService.NotifyErrorAsync method too.

Then you can see a notification show in the top right corner of the screen.

IconType

ByNotice has five icon styles: info, success, warning, error, and none, and the default style is info. You can change the icon through NoticeOption.IconType.

public enum IconType
{
    None = 0,
    Info = 1,
    Success = 2,
    Warning = 3,
    Error = 4
};

All IconType:

default info

default success

default warning

default error

default none icon

You can also customize Icon with NoticeOption.CustomIconHtml, and it accepts an HTML string value, such as: font icon

await NoticeService.NotifyAsync(new NoticeOption()
{
    CustomIconHtml = "<span class=\"oi oi-home\" aria-hidden=\"true\"></span>",
    ...
 });

svg

await NoticeService.NotifyAsync(new NoticeOption()
{
    CustomIconHtml = "<svg viewBox=\"64 64 896 896\" focusable=\"false\" class=\"\" data-icon=\"question-circle\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z\"></path><path d=\"M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z\"></path></svg>",
    ...
 });

Demo:

Notice Placement

Notifications are allowed to appear in four corners of the screen, You can control it through attribute Placement in NoticeOption, which is Is an enumeration type(NoticePlacement), It can change where notifications appear. NoticePlacement is defined as follows:

public enum NoticePlacement
{
    TopLeft = 0,
    TopRight = 1,
    BottomLeft = 2,
    BottomRight = 3
}

If you want the notifications show in the top left corner of the screen, you can use it like this:

await NoticeService.NotifyAsync(new NoticeOption()
{
    Placement = NoticePlacement.TopLeft,    
    ...    
});

Emphasize Effect

The default effect is fade in, you can control it with the "IsEmphasize" property, which is a Boolean value. Its default value is false.

await NoticeService.NotifyAsync(new NoticeOption()
{
    IsEmphasize = true,
    ...
});

Demo:

Colorful

The default notification effect is a pure white background, and it has implemented a default set of background colors, you can control it through the NoticeOption.IsColorful property, which is a Boolean value. Its default value is false.

await NoticeService.NotifyAsync(new NoticeOption()
{
    IsColorful = true,
    ...
});}

Note that if IconType = IconType.None, it will not change.

Demo:

colorful info

colorful success

colorful warning

colorful error

Keep time

Notification's default display time is 5 seconds, it can be controlled through the NoticeOption.KeepTime property. NoticeOption.KeepTime is a TimeSpan object, and if NoticeOption.KeepTime.TotalMilliseconds less than or equal to 0, it will not hide automatically. The use method is as follows.

await NoticeService.NotifyAsync(new NoticeOption()
{
    KeepTime = TimeSpan.FromSeconds(10),
    ...
});

Custom Width

Notification's default width is 300px, NoticeOption has a property of Width, it accepts any width value string valid in css, such as:

await NoticeService.NotifyAsync(new NoticeOption()
{
    Width = "400px",
    ...
 });

OnClose Event

You can define the hook function when the notification is hidden through the NoticeOption.OnClose. Its definition is as follows.

public Action<NoticeOption> OnClose { get; set; }

And you can use it like this:

await NoticeService.NotifyAsync(new NoticeOption()
{
    OnClose = (option) => {
        JsRuntime.InvokeVoidAsync("alert", "OnClose");
    },
    ....
});

When the notification is hidden, brower will alert "OnClose".

Demo:

All api options

name	type	default	describe
Title	string	null	Notification title
Message	string	null	Notification content
IconType	enum IconType	IconType.Info	Icon style. There are 5 values in total: None, Info, Success, Warning, Error. If not define CustomIconHtml, it will show default ICON.
KeepTime	TimeSpan	TimeSpan.FromSeconds(5)	Control when notifications are displayed. If KeepTime.TotalMilliseconds less than or equal to 0, it will not hide.
Placement	enum NoticePlacement	NoticePlacement.TopRight	Control where notifications are displayed. There are 4 values in total: TopLeft, TopRight, BottomLeft, BottomRight.
IsColorful	bool	false	Whether it is a colored background
IsEmphasize	bool	false	Whether the showing effect is emphasized
CustomIconHtml	string	null	Custom icon
OnClose	Action	null	Hook function when notification is closed