Tab List

RfTabList provides an accessible tabbed interface with keyboard navigation support. It manages the registration, activation, and navigation of tabs while ensuring only one tab is active at a time. Individual tabs are defined using RfTab components within the tab list.

When to Use

When you need to organize related content into separate panels that users can switch between, such as settings panels, different views of data, or step-by-step processes.

To use RfTabList, create a tab list container and define individual tabs using RfTab components. Each tab has a unique identifier and contains both the tab header content and the panel content.

The RfTabList manages tab state through a RfTabListContext which is passed down to child tabs via a CascadingParameter.

RfTabList Component

The main container that manages all tabs and handles keyboard navigation.

Parameter	Type	Description
ActiveTabId	string	The identifier of the currently active tab. Required parameter.
ActiveTabIdChanged	EventCallback<string>	Callback invoked when the active tab ID changes.
TabListAriaLabel	string	ARIA label for the tab list element for accessibility.
CssClass	string	CSS classes to apply to the component wrapper.
TabsCssClass	string	CSS classes for the tabs container. Use Bulma classes like .is-boxed, .is-toggle, etc.
PanelCssClass	string	CSS classes for the panel wrapper element.
ChildContent	RenderFragment	Content containing RfTab components.

RfTab Component

Individual tab component that defines both the tab header and panel content.

Parameter	Type	Description
TabId	string	Unique identifier for the tab. Required parameter.
Tab	RenderFragment	Content to render in the tab header.
Panel	RenderFragment	Content to render in the tab panel.
LoadingPanel	RenderFragment	Content to display while the tab is loading.
ShowPanelWhenHidden	bool	Whether to render panel content even when not active (for SEO). Default: false.
TabCssClass	string	CSS classes to apply to the tab element.
PanelCssClass	string	CSS classes to apply to the panel element.
OnShow	EventCallback<string>	Callback invoked when the tab becomes visible.
OnLoad	EventCallback<string>	Callback invoked when the tab is loaded for the first time.
OnHide	EventCallback<string>	Callback invoked when the tab is hidden.

Keyboard Navigation

The tab list supports full keyboard navigation:

• Arrow Left/Right: Navigate between tabs
• Home: Focus first tab
• End: Focus last tab

Basic Example

Below shows a basic example of setting up the RfTabList with multiple tabs.

<RfTabList @bind-ActiveTabId="ActiveTabId">
    <RfTab TabId="tab1">
        <Tab>First Tab</Tab>
        <Panel>
            <p>This is the content of the first tab.</p>
        </Panel>
    </RfTab>
    <RfTab TabId="tab2">
        <Tab>Second Tab</Tab>
        <Panel>
            <p>This is the content of the second tab.</p>
        </Panel>
    </RfTab>
    <RfTab TabId="loading-tab" OnLoad="LoadTabContent">
        <Tab>Loading Tab</Tab>
        <LoadingPanel>
            <p>Loading content, please wait...</p>
        </LoadingPanel>
        <Panel>
            <p>Content loaded successfully!</p>
        </Panel>
    </RfTab>
</RfTabList>

Loading States

Tabs can display loading content using the LoadingPanel render fragment. During loading, the tab will show a loading indicator and call the OnLoad callback.

Styling with Bulma

The tab list integrates with Bulma CSS framework classes:

• .is-boxed - Boxed tabs
• .is-toggle - Toggle-style tabs
• .is-fullwidth - Full width tabs
• .is-centered - Centered tabs
• .is-right - Right-aligned tabs

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.