https://github.com/milesfan/blazoroverlay
A blazor library to display overlays (dialog, loading indicators), without any js or css file.
https://github.com/milesfan/blazoroverlay
blazor
Last synced: 17 days ago
JSON representation
A blazor library to display overlays (dialog, loading indicators), without any js or css file.
- Host: GitHub
- URL: https://github.com/milesfan/blazoroverlay
- Owner: MilesFan
- License: mit
- Created: 2025-09-16T20:14:24.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-16T22:13:12.000Z (10 months ago)
- Last Synced: 2025-09-17T00:39:32.379Z (10 months ago)
- Topics: blazor
- Language: C#
- Homepage: https://github.com/MilesFan/BlazorOverlay
- Size: 109 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BlazorOverlay
A blazor library to display overlays (dialog, loading indicators), without any js or css file.
## Why
For large projects you have many existing good libraries for this purpose.
For small projects you may expect something light-weight and portable. This is it.
BlazorOverlay does not add javascript or css files to your project, and only requires simple setup (or none).
## Installation
### Option 1: Nuget
Search and install "BlazorOverlay" in Nuget Package Manager.
### Option 2: Project Referrence
Download or Git-Clone this project, then referrence it in your Blazor project.
## Usage
### Dependancy Injection (recommended)
add service at startup:
```C#
public static void Main(string[] args)
{
...
builder.Services.AddScoped();
...
}
```
and then in a razor page:
```razor
@rendermode InteractiveServer
@inject BlazorOverlay.Overlay overlay
Show Loader (click to close)
Show Success (auto close)
Show Message (with close button)
Show Message (without close button)
Show Message (auto close)
@code {
private async Task ShowMessage_HasCloseButton()
{
await overlay.ShowMessage(
"A network issue is encountered, please try again.",
hasCloseButton: true
);
}
private async Task ShowMessage_NoCloseButton()
{
await overlay.ShowMessage(
"A network issue is encountered, please refresh the page.",
hasCloseButton: false
);
}
private async Task ShowMessage_AutoClose()
{
var dialogRef = await overlay.ShowMessage(
"A network issue is encountered.\n This message will disappeat in 4 seconds。",
hasCloseButton: true
);
await Task.Delay(4000);
await overlay.Dismiss(dialogRef);
}
private async Task ShowLoader()
{
var dialogRef = await overlay.ShowLoader();
await Task.Delay(1500);
await overlay.ShowSuccess(dialogRef);
}
private async Task ShowSuccess()
{
await overlay.ShowSuccess(2000);
}
}
```
### Ad-hoc
Simply initialize an instance in page and just use it:
```Razor
@inject IJSRuntime js
Show Message (No DI)
@code {
private async Task ShowMessage_NoDI()
{
var overlay = new BlazorOverlay.Overlay(js);
await overlay.ShowMessage("Show a message without using dependancy injection.");
}
}
```
## Source Code
This project is open sourced at [GitHub](https://github.com/MilesFan/BlazorOverlay).
## Author
Fan Xing Hua (Miles)
## License
Source code is licensed under [MIT](https://github.com/MilesFan/BlazorOverlay/blob/main/LICENSE).