Table of Contents

Class TwTabContainer

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a tabbed interface component that allows users to organize and switch between multiple content sections within a user interface.

public class TwTabContainer : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IAsyncDisposable
Inheritance
TwTabContainer
Implements
Inherited Members

Remarks

Use this component to create a set of tabs, each displaying different content. The active tab is managed internally, and child content for each tab should be provided using the ChildContent parameter. This component is typically used to improve navigation and organization of related content in a single view.

Constructors

TwTabContainer() 

public TwTabContainer()

Properties

ActiveTab 

public TwTab? ActiveTab { get; }

Property Value

TwTab

ChildContent

Gets or sets the content to be rendered inside the component.

[Parameter]
public required RenderFragment ChildContent { get; set; }

Property Value

RenderFragment

Remarks

This property is required and must be set to specify the child elements or markup that will be displayed within the component.

ContainerClass

Gets or sets additional CSS classes for the tab content area.

[Parameter]
public string? ContainerClass { get; set; }

Property Value

string

Remarks

This is the container wrapping the tab content area.

Dense

Gets or sets whether the tabs should use dense (compact) styling with reduced padding.

[Parameter]
public bool Dense { get; set; }

Property Value

bool

Remarks

When set to true, tabs will have reduced padding for a more compact appearance. This is useful when space is limited or when displaying many tabs.

TabColor

Gets or sets the color of all the tabs associated with the component.

[Parameter]
public Color? TabColor { get; set; }

Property Value

Color?

Remarks

If set to null, the default tab color is used. This property allows customization of the tab's appearance to match application themes or user preferences.

TabContainerClass

Gets or sets additional CSS classes for the tabs navigation container.

[Parameter]
public string? TabContainerClass { get; set; }

Property Value

string

Remarks

This is the container wrapping the tab navigation buttons.

TabsElement

Gets or sets a reference to the tabs element in the user interface.

public ElementReference TabsElement { get; set; }

Property Value

ElementReference

Remarks

This property enables direct interaction with the underlying tabs element, such as for JavaScript interop or DOM manipulation. Ensure that the element is initialized before accessing this property, especially when using it in lifecycle methods.

TransparentContainer

Gets or sets whether the background class should be removed from the tab navigation and content containers, leaving only the border outline.

[Parameter]
public bool TransparentContainer { get; set; }

Property Value

bool

Remarks

Useful when the tabs are placed inside another container that already provides a background, and the default white/dark background would otherwise clash with it.

Methods

ActivateTab(TwTab)

Activates the specified tab and adds it to the collection of tabs. If no tab is currently active, the specified tab becomes the active tab.

public void ActivateTab(TwTab tab)

Parameters

tab TwTab

The tab to be activated and added to the collection of tabs. Cannot be null.

Remarks

This method ensures that the specified tab is part of the active tab collection. If there is no active tab when this method is called, the provided tab will be set as the active tab.

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

DisposeAsync()

Releases the JS-side keydown guard registered for this tablist.

public ValueTask DisposeAsync()

Returns

ValueTask

OnAfterRenderAsync(bool)

Registers a native JS keydown listener on the tablist that selectively calls event.preventDefault() only for the arrow-key/Home/End tablist navigation keys, so pressing them doesn't also trigger the browser's native scroll (Home/End can scroll to the top/bottom of the page, ArrowUp/Down can scroll it too).

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

Remarks

This can't be done with the declarative @onkeydown:preventDefault directive: that directive is a static, per-render-cycle binding that isn't evaluated per-keystroke - setting it to true would call preventDefault() for every keydown on the tablist, including Tab. Tab's default browser action is "move focus to the next focusable element", and TwBlazor.Components.TwTabContainer.HandleTabKeyDown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs) has no case for it (it falls through to _ => null and returns early), so blanket-preventing default would suppress that focus-move with nothing to replace it - trapping keyboard focus inside the tablist, which is strictly worse than the scroll nuisance this is meant to fix. Registering a native listener that inspects e.key before deciding whether to prevent default (mirroring the JS-side event-handling pattern already used by twDialog for its Tab focus trap) avoids that: it runs alongside Blazor's own @onkeydown="HandleTabKeyDown" binding (which still does the actual tab-switching logic in C#) and only ever calls preventDefault for ArrowRight/ArrowLeft/ArrowUp/ArrowDown/Home/End, leaving Tab (and every other key) completely untouched.

OnInitialized()

Method invoked when the component is ready to start, having received its initial parameters from its parent in the render tree.

protected override void OnInitialized()

ViewTab(TwTab)

Sets the specified tab as the currently active tab.

public void ViewTab(TwTab tab)

Parameters

tab TwTab

The tab to set as active. This parameter cannot be null.

Edit this page