The DevExpress Tabs component for Blazor allows you to build tabbed interfaces. You can display tabbed pages (DxTabPage components) or tab headers only (DxTab components).

The main tab-related API is listed below:

• ActiveTabIndex – Specifies the active tab's index.
• Click – Fires when a user clicks the tab. Handle this event to specify different click handlers for different items. To specify a common click handler for all tabs, use the TabClick event at the component's level.
• RenderMode – Specifies how the DxTabs component loads tab content.
• ScrollMode – Specifies how users navigate between tabs when they do not fit the container's width.
• TabIconCssClass – Specifies the tab icon's CSS class.
• TabTemplate – Specifies the tab's template.
• TextTemplate – Specifies the template used to display the tab's text.

The Tabs component also supports keyboard navigation. Press the Tab key or Shift+Tab to focus the component and use Arrow keys to navigate through tabs.

Use the DxTabPage class to create tab pages within the DxTabs component.

You can use the ActiveTabIndex property to track active tab change events. This example demonstrates how to update the content area when a user selects a tab.

Use the TabPosition property to specify where tab headers appear relative to tab content.

In this demo, you can choose four positions: Top, Bottom, Right, Left.

Use the ScrollMode property to specify how users navigate between tabs when they do not fit the container's width. The following modes are available:

• Auto — the scroll mode is adapted to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
• NavButtons — the container displays a few tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons, or hover the mouse pointer over a tab, hold the Shift key, and scroll the mouse wheel.
• Swipe — the container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.
• NoScroll — users cannot scroll tabs. The tabs that do not fit the container's width are moved to a new line.

Use the Scroll Mode combobox to switch between different modes.

Set the AllowTabReorder property to true to drag & drop tab headers and reorder them as needed. When a user drops a tab, the component raises the TabReordering event. You can use event argument properties to obtain information about tab position (both old and new position) and cancel the action if necessary.

In this demo, tabs display Close buttons in their headers because the AllowClose property is true. Users can close a tab in the following manner:

• Click the Close button in the tab header.
• Press the Delete key.

Before closing a tab, the component raises the TabClosing event. This event allows you to obtain information about the tab being processed, identify the action that raised the event, and cancel the action if necessary.