Persilsoft.Dialog.Blazor
1.0.3
dotnet add package Persilsoft.Dialog.Blazor --version 1.0.3
NuGet\Install-Package Persilsoft.Dialog.Blazor -Version 1.0.3
<PackageReference Include="Persilsoft.Dialog.Blazor" Version="1.0.3" />
paket add Persilsoft.Dialog.Blazor --version 1.0.3
#r "nuget: Persilsoft.Dialog.Blazor, 1.0.3"
// Install Persilsoft.Dialog.Blazor as a Cake Addin
#addin nuget:?package=Persilsoft.Dialog.Blazor&version=1.0.3
// Install Persilsoft.Dialog.Blazor as a Cake Tool
#tool nuget:?package=Persilsoft.Dialog.Blazor&version=1.0.3
Persilsoft.Dialog.Blazor
A simple implementation of Bootstrap Dialog
Example
You can use it.
@page "/dialogdemo"
@using Persilsoft.Dialog.Blazor
<PageTitle>Dialog Demo</PageTitle>
<h1>Dialog Demo</h1>
<hr />
<div class="form-check">
<input class="form-check-input" type="checkbox" id="backdropDialog" @bind=backdrop />
<label class="form-check-label" for="backdropDialog">
Backdrop
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="verticalCenteredDialog" @bind=verticalCentered />
<label class="form-check-label" for="verticalCenteredDialog">
Vertical centered
</label>
</div>
<button class="btn btn-primary" @onclick=OpenSmallDialog>Open small dialog</button>
<button class="btn btn-warning" @onclick=OpenDefaultDialog>Open default dialog</button>
<button class="btn btn-success" @onclick=OpenLargeDialog>Open large dialog</button>
<button class="btn btn-info" @onclick=OpenExtraLargeDialog>Open extra-large dialog</button>
<Dialog IsOpen=isDialogOpen
Size="modalSize"
Backdrop=backdrop
VerticallyCentered=verticalCentered>
<div class="modal-content">
<div class="modal-header bg-info text-white p-2">
<h4>My Title</h4>
<button type="button" class="btn-close" @onclick=CloseDialog></button>
</div>
<div class="modal-body">
<p>Some message!</p>
<div class="text-center mt-2">
<button class="btn btn-success" @onclick=CloseDialog>Close</button>
</div>
</div>
</div>
</Dialog>
@code {
private bool isDialogOpen;
private bool backdrop;
private bool verticalCentered;
private ModalSize modalSize;
private void OpenSmallDialog()
{
modalSize = ModalSize.Small;
isDialogOpen = true;
}
private void OpenDefaultDialog()
{
modalSize = ModalSize.Default;
isDialogOpen = true;
}
private void OpenLargeDialog()
{
modalSize = ModalSize.Large;
isDialogOpen = true;
}
private void OpenExtraLargeDialog()
{
modalSize = ModalSize.ExtraLarge;
isDialogOpen = true;
}
private void CloseDialog() => isDialogOpen = false;
}
You can send the following parameters:
IsOpen: Sets whether the dialog is open or not (required)
Size: Sets the size of the dialog. This is an enumeration (ModalSize.Small, ModalSize.Default, ModalSize.Large, ModalSize.ExtraLarge). Default value: ModalSize.Default
Backdrop: Sets the background static. The modal will not close when clicking ousing for it. Default value: true
VerticallyCentered: Indicates whether the modal should be vertically centered. Default value: false
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0 is compatible. 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.5)
NuGet packages (2)
Showing the top 2 NuGet packages that depend on Persilsoft.Dialog.Blazor:
Package | Downloads |
---|---|
Persilsoft.Membership.Blazor
Contains razor clases for use in frontend membership projects |
|
Persilsoft.ExceptionHandler.Blazor
Contains Razor components to manage exceptions in Blazor Apps |
GitHub repositories
This package is not used by any popular GitHub repositories.