Table of Contents

Class TwSidebar

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a responsive sidebar layout component with customizable header, navbar, and sidebar content areas.

public class TwSidebar : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent, IDisposable
Inheritance
TwSidebar
Implements
Inherited Members

Remarks

Use TwSidebar to create a page layout with a collapsible sidebar, optional header, and navigation bar. The component supports dynamic content injection via RenderFragment parameters and provides properties to control appearance, layout, and interactivity. Sidebar open state and navigation items can be data-bound for integration with application state. This component is intended for use in Blazor applications and is designed to be flexible for a variety of layout scenarios.

Constructors

TwSidebar()

public TwSidebar()

Properties

ChildContent

The page body content.

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

Property Value

RenderFragment

HeaderContent

Gets or sets the content to render in the header area of the sidebar.

[Parameter]
public RenderFragment? HeaderContent { get; set; }

Property Value

RenderFragment

Remarks

Assign a RenderFragment to customize the sidebar header's appearance and layout. If null, the sidebars header will be hidden.

IsNavbarFixed

Gets or sets a value indicating whether the navbar should be fixed at the top.

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

Property Value

bool

IsSearchable

Binds the searchable state of the sidebar, allows for sidebar items to be searched.

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

Property Value

bool

IsSidebarOpen

Gets or sets a value indicating whether the sidebar is currently open.

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

Property Value

bool

IsSidebarOpenChanged

Gets or sets the callback that is invoked when the sidebar open state changes.

[Parameter]
public EventCallback<bool> IsSidebarOpenChanged { get; set; }

Property Value

EventCallback<bool>

Remarks

Use this callback to respond to changes in the sidebar's visibility, such as updating application state or triggering additional actions when the sidebar is opened or closed.

MainContentClass

The classes that are applied to the main content div.

[Parameter]
public string MainContentClass { get; set; }

Property Value

string

MainContentRootClass

The classes that are applied to the main content root div.

[Parameter]
public string MainContentRootClass { get; set; }

Property Value

string

NavbarActionsContent

Gets or sets the content rendered in the embedded navbar's actions slot.

[Parameter]
public RenderFragment? NavbarActionsContent { get; set; }

Property Value

RenderFragment

Remarks

Passed straight through to ActionsContent.

NavbarBrandContent

Gets or sets the content rendered in the embedded navbar's brand slot.

[Parameter]
public RenderFragment? NavbarBrandContent { get; set; }

Property Value

RenderFragment

Remarks

Passed straight through to BrandContent.

NavbarClass

The classes that are applied to the parent div for the navbar.

[Parameter]
public string NavbarClass { get; set; }

Property Value

string

NavbarContent

Gets or sets the content to be rendered in the navbar area of the component.

[Parameter]
public RenderFragment? NavbarContent { get; set; }

Property Value

RenderFragment

Remarks

Rendered alongside the sidebar's own drawer toggle, in the embedded TwNavbar's ChildContent slot. For the navbar's other slots, see NavbarBrandContent, NavbarNavigationContent, NavbarActionsContent, and NavbarNavigationItems.

NavbarNavigationContent

Gets or sets custom content rendered in the embedded navbar in place of NavbarNavigationItems.

[Parameter]
public RenderFragment? NavbarNavigationContent { get; set; }

Property Value

RenderFragment

Remarks

Passed straight through to NavigationContent.

NavbarNavigationItems

Gets or sets the navigation items rendered in the embedded navbar when NavbarNavigationContent is not supplied.

[Parameter]
public List<NavigationItem> NavbarNavigationItems { get; set; }

Property Value

List<NavigationItem>

Remarks

Passed straight through to NavigationItems. This is independent of NavigationItems, which populates the sidebar itself.

NavigationItems

Gets or sets the collection of sidebar items to be displayed in the component.

[Parameter]
public List<NavigationItem> NavigationItems { get; set; }

Property Value

List<NavigationItem>

Remarks

If null or empty, no sidebar items will be rendered. Changes to this collection will update the displayed sidebar items accordingly.

SidebarClass

The classes that are applied to the parent div for the sidebar.

[Parameter]
public string SidebarClass { get; set; }

Property Value

string

SidebarContent

Gets or sets the content to be rendered in the sidebar area of the component.

[Parameter]
public RenderFragment? SidebarContent { get; set; }

Property Value

RenderFragment

Remarks

Assign a RenderFragment to customize the sidebar's appearance and layout. If null, the sidebar will not display any content.

ToggleButtonClass

The classes that are applied to the toggle snackbar.

[Parameter]
public string ToggleButtonClass { get; set; }

Property Value

string

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

Dispose()

public void Dispose()

Dispose(bool)

protected virtual void Dispose(bool disposing)

Parameters

disposing bool

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

OnParametersSet()

Invoked when the component's parameters have been set. Ensures that the component has a unique identifier by generating one if none is provided.

protected override void OnParametersSet()

Remarks

If the component's identifier is not set, a unique ID is generated based on the component's type name (with a 'Tw' prefix removed if present) and a GUID. This helps ensure that each component instance can be uniquely identified, which is useful for scenarios such as associating labels with form elements or targeting elements in client-side scripts.