Dropdown (Single)

RfDropDown creates a Bulma dropdown that supports searching and manages the selection of an item.

When not to Use

Don't use RfDropDown when:

• When using static rendering mode. Instead use InputSelect.

The RfDropDown works primarily with two parameters: SelectedItem and Items.

How are Items Render?

The dropdown doesn't make any assumptions on how to render the items or selected item it is given. Instead the drop down supports three RenderFragement to customize the way an item appears within the drop down. All three RenderFragement have a context of TItem and are used to setup two sections. The two sections of the drop down that can be custimized are RowItemTemplate and SelectedItemTemplate.

Row Item Template

The RowItemTempalte directly sets each row or option of the drop down. Each row is wrapped in the following code:

<a class="dropdown-item">@RowItemTemplate(item)</a>

If RowItemTemplate isn't set the drop down will use ChildContent.

Selected Item Template

When the drop down has a selection it calls the SelectedItemTemplate to render the TItem within the input portion of the drop down. The selected item is wrapped in the following code:

<span>@SelectedItemTemplate(SelectedItem)</span>

If SelectedItemTemplate isn't set the drop down will use ChildContent.

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

1. Install the Nuget package
2. Import the namespaces (optional)
3. Register RForge services
4. Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line

dotnet add package RForge.Blazor

Package Manager Console

Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line

dotnet add package RForge.Abstractions

Package Manager Console

Install-Package RForge.Abstractions

Import the namespaces

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.

Register RForge Services

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();
    

Include Bulma CSS

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.