A classic modal implementation
RfModalCard creates a modal designed to show a complex modal.
Use RfModalCard when you need to display a modal designed to for editing / forms.
Don't use RfModalCard when:
RfModal.
RfModalCard works by making use of IsVisible parameter.
It supports two way binding allowing the modal itself to close it.
Unlike RfModal, RfModalCard makes use of three RenderFragments / sections Body, Head, and Foot.
Below show a basic example of RfModalCard.
<RfModalCard @@bind-IsVisible="ModalIsVisible"><Head><p class="modal-card-title">Modal Title</p></Head> <Body><div>Some content within the modal.</div></Body> <Foot><div class="buttons"><a class="button">Some Buttons</a></div></Foot></RfModalCard> <a class="button" @@onclick="OnShowModalClick">Show Modal</a> @code { public bool ModalIsVisible { get; set; } public void OnShowModalClick() => ModalIsVisible = true; }
Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.
RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.
dotnet add package RForge.BlazorInstall-Package RForge.BlazorThis is optional but may be useful if you want to use common enums across the backend and frontend.
dotnet add package RForge.AbstractionsInstall-Package RForge.Abstractions
To simplify namespacing while using RForge,
the package is designed with most all components sitting within the root RForge namespace.
You may want to include the following namespaces in your _import.razor for ease of use.
@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions
| Namespace | Purpose |
|---|---|
RForgeBlaozr |
Houses all of the blazor components. |
RForgeBlaozr.Services |
Houses interfaces you may need to communicate with certain components. |
RForgeBlaozr.Abstractions |
Common enums used through out the components. |
In order for some components to work they must first have their services registered.
Open up Program.cs and add the following line before the var app = builder.Build();.
using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();
RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.