NetcodeHub.Packages.Components.Modal
1.0.0
dotnet add package NetcodeHub.Packages.Components.Modal --version 1.0.0
NuGet\Install-Package NetcodeHub.Packages.Components.Modal -Version 1.0.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="NetcodeHub.Packages.Components.Modal" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add NetcodeHub.Packages.Components.Modal --version 1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: NetcodeHub.Packages.Components.Modal, 1.0.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install NetcodeHub.Packages.Components.Modal as a Cake Addin
#addin nuget:?package=NetcodeHub.Packages.Components.Modal&version=1.0.0
// Install NetcodeHub.Packages.Components.Modal as a Cake Tool
#tool nuget:?package=NetcodeHub.Packages.Components.Modal&version=1.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
Install the package
*NetcodeHub.Packages.Components.Modal *
Add JS reference to the application's App.razor file
*<script src="_content/NetcodeHub.Packages.Components.Modal/modal.js"></script>*
Add Namespace
*@using NetcodeHub.Packages.Components.Modal*
<button class="btn btn-info" @onclick="ShowConfirmation">Show Confirmation</button>
<br />
Confirmation : @Confirm
Use the Confirmation Component**
*<Confirmation @ref="confirmation"
Instruction="@Instruction"
Action="Handle"
BoostrapClass="border-danger"
CustomStyle="width:300px;" />*
@code
{
// Confirmation Modal Component
Confirmation? confirmation;
public bool Confirm { get; set; }
string Instruction = "Are you sure you wanna do this?";
void Handle() => Confirm = true;
void ShowConfirmation() => confirmation!.Show();
}
Use the Modal Component**
<button class="btn btn-info" @onclick="OpenModal">Open modal</button>
Selection Action: @SelectedAction <br/>
<Modal @bind-Open="IsOpen"
Actions="ButtonActions"
BootstrapClass="border-success rounded p-2 ml-2 mr-2"
CustomStyle="min-width:300px; max-width:500px;">
<ContentContent>
<p class="text-center text-muted">
The component was built using modal dialog. We are manipulating it using CSS and JS,
This element provides what we want to display a modal and get a return value of type string.
</p>
</ContentContent>
<ButtonTemplate>
<div class="d-flex justify-content-center align-content-center">
<button class="btn btn-success btn-sm" value="ok" style="margin-right:5px">Okay</button>
<button class="btn btn-danger btn-sm" value="cancel">Cancel</button>
</div>
</ButtonTemplate>
</Modal>
@code{
public bool IsOpen { get; set; }
void OpenModal() => IsOpen = true;
void ButtonActions(string action)
{
if (action == "ok") {
// do something
}
else if (action == "cancel") {
// you can also do something
}
}
}
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. |
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
1.0.0 | 1,534 | 2/2/2024 |
This is of first kind. Your suggestions can help improve this package.