Tabs Component

The BosuiTabs component provides an organized way to display content in multiple tabs. It supports various tab positions, lazy loading, event handling, and responsive behavior. Perfect for organizing related content and improving user navigation.

Basic Usage

Welcome Home

This is the home tab content. Here you can display your main dashboard, overview information, or primary content that users see first.

Tab Positions

Content for tab 1

Tabs can be positioned at the top, bottom, left, or right of the content area

Tabs with Icons

Enhance your tabs with icons for better visual recognition:

📊 Dashboard Overview

Welcome to your dashboard! Here you can view key metrics, recent activity, and important notifications.

Users
1,234

Sales
$12,345

Orders
456

Disabled Tabs and Events

Tabs can be disabled and you can handle tab change events:

This tab is available and active.

Event Log:

No events yet. Switch tabs to see events.

Lazy Loading

Control when tab content is rendered for performance optimization:

Always Rendered

This content is rendered immediately regardless of lazy loading setting.

Rendered at: 02:08:40

Enable lazy loading

Lazy loading enabled: Tab content is only rendered when the tab becomes active for the first time.

Lazy Loading Code

<BosuiTabs LazyLoad="true">
    <BosuiTab Title="Light Content">
        <p>Simple content</p>
    </BosuiTab>
    <BosuiTab Title="Heavy Content">
        @for (int i = 1; i <= 100; i++)
        {
            <div>Heavy content item @i</div>
        }
    </BosuiTab>
</BosuiTabs>

<BosuiTabs LazyLoad="false">
    <BosuiTab Title="Tab 1">Content 1</BosuiTab>
    <BosuiTab Title="Tab 2">Content 2</BosuiTab>
</BosuiTabs>

Component Properties

BosuiTabs Properties

Property	Type	Default	Description
ActiveTabId	string?	null	Gets or sets the ID of the currently active tab. Supports two-way binding.
TabPosition	TabPosition	Top	Position of the tab headers: Top, Bottom, Left, or Right.
LazyLoad	bool	true	Whether to render tab content only when the tab becomes active for the first time.
OnTabChanged	EventCallback<BosuiTabEventArgs>	-	Event triggered when the active tab changes.
ChildContent	RenderFragment?	null	Container for BosuiTab components.
Style	string?	null	Custom CSS styles to apply to the tabs container.
Class	string?	null	Additional CSS classes to apply to the tabs container.

BosuiTab Properties

Property	Type	Default	Description
Title	string	""	Text displayed in the tab header.
Icon	string?	null	CSS class for an icon to display in the tab header.
Disabled	bool	false	Whether the tab is disabled and non-interactive.
ChildContent	RenderFragment?	null	Content to display when the tab is active.
Style	string?	null	Custom CSS styles to apply to the tab content.
Class	string?	null	Additional CSS classes to apply to the tab content.

Event Arguments

BosuiTabEventArgs

Property	Type	Description
PreviousTabId	string?	ID of the previously active tab, if any.
CurrentTabId	string?	ID of the currently active tab.

Responsive Behavior

Mobile Adaptation: Left and right positioned tabs automatically convert to top position on small screens
Horizontal Scrolling: Tab headers scroll horizontally when they overflow on mobile devices
Touch Friendly: Tab headers are sized appropriately for touch interaction
Flexible Content: Tab content areas adapt to available space

Accessibility

Keyboard Navigation: Tab headers are focusable and can be activated with Enter or Space keys
Arrow Key Support: Use arrow keys to navigate between tab headers
Focus Management: Focus moves to newly activated tab content
Screen Reader Support: Proper ARIA attributes for tab roles and states
Disabled State: Disabled tabs are properly announced to assistive technologies
Content Association: Tab content is properly associated with tab headers

Best Practices

Logical Organization: Group related content together and order tabs logically
Clear Labels: Use descriptive tab titles that clearly indicate the content
Appropriate Number: Limit the number of tabs to avoid horizontal scrolling when possible
Consistent Content: Maintain similar content structure across tabs
Performance: Use lazy loading for tabs with heavy content or data fetching
Visual Hierarchy: Use icons thoughtfully to enhance recognition
State Management: Handle tab state appropriately in your application
Error Handling: Provide feedback for failed content loading in tabs

Related Components

Tab Positions

Top

Bottom

Left

Right