https://github.com/brianlparker/blazordialogs
https://github.com/brianlparker/blazordialogs
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/brianlparker/blazordialogs
- Owner: BrianLParker
- Created: 2022-05-17T08:49:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T20:35:07.000Z (over 3 years ago)
- Last Synced: 2025-03-13T16:23:04.889Z (over 1 year ago)
- Language: HTML
- Size: 7.06 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blazor Dialogs
This library gives the html `` element some Blazor love.
### Add the nuget package.
### Import the library
**_Imports.razor**
```
@using BlazorDialogs
```
### Usage
```
Open Dialog
YOUR CONTENT
@code {
private Dialog dialog;
async Task ShowDialogAsync() => await dialog.ShowDialogAsync();
async Task DialogClosedAsync() { /* process content */ }
}
```
### How to open a dialog on a components initialization (pages are components).
Use your hosting components `OnAfterRenderAsync` method to show the dialog. This is required as the `@ref` is not initialized before this.
```
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender is true)
{
await dialog.ShowDialogAsync();
StateHasChanged();
}
await base.OnAfterRenderAsync(firstRender);
}
```
The component captures attributes and applies them to the underlying `` element.
Included in the component are the following css classes.
Available options:
| class name | effect |
| -- | -- |
| bd-back-blur3 | blurs content behind the dialog by 3 pixels |
| bd-back-blur5 | blurs content behind the dialog by 5 pixels |
| bd-back-blur10 | blurs content behind the dialog by 10 pixels |
| bd-backdrop-blur3 | blurs content behind the backdrop of the dialog by 3 pixels |
| bd-backdrop-blur5 | blurs content behind the backdrop of the dialog by 5 pixels |
| bd-backdrop-blur10 | blurs content behind the backdrop of the dialog by 10 pixels |