Tabs

Demonstration and configuration of the Radzen Blazor Tabs component.

These demos showcase tabbed interfaces with various configurations including tab positioning, server/client render modes, dynamic tab item modifications, tab wrapping behavior, and conditional tab change prevention with the CanChange event.

Tabs position link

Use the TabPosition property to position tabs at the top, bottom, left, or right of the content area.

Photo

Last Name

First Name

Employee ID

Title

Birth Date

Hire Date

Address

City

Region

Postal Code

Country

Home Phone

Extension

Notes

No records to display.

Customer ID Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Company Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Name Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Contact Title Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Address Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	City Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Region Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Postal Code Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Country Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Phone Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty	Fax Filter Contains Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty And And Or Equals Equals Not equals Contains Starts with Ends with Does not contain Is null Is empty Is not null Is not empty
No records to display.

Console log

Server render mode link

Only selected tab content will be rendered.

Customers

Client render mode link

All tabs will be rendered initially and tab change will be performed completely using JavaScript

Customers

TabItems modify link

Demonstrating modifications to the TabItem collection

Customers

Tab items wrap link

Demonstrating wrap of the Tab items

Tab0

Prevent Tab change link

Demonstrating how to prevent Tab change

Tab1

Keyboard Navigation link

The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Tabs component.

Press this key	To do this
Tab	Navigate to a Tabs component.
RightArrow	Focus next Tab.
LeftArrow	Focus previous Tab.
Space or Enter on a focused Tab	Select the Tab.

✨ 오늘의 명언 & 마음의 양식

Tabs

Tabs position link

Server render mode link

Client render mode link

TabItems modify link

Tab items wrap link

Prevent Tab change link

Keyboard Navigation link

“남들이 가보지 않은 길을 따라가서 자신만의 흔적을 남겨라.”

— 랄프 발도 에머슨 (시인, 철학자)

On this page

Demos Configuration