Blazor TabStrip - Overview

Forecast

21ÂșC

Cloudy weather in London.

Active Tab Index: 1

  • Overview.razor
  • WeatherCard.razor
Loading the demo source code...please wait.
blazor ui ninja image

The TabStrip component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Description

The Telerik UI for Blazor TabStrip allows you to switch views through a collection of tabs and their content. By using tabs within your web application, you provide users a straightforward way to view and navigate content within a single component.

Beyond the visual appeal of the Blazor TabStrip, it enables you to organize your content by grouping it in user-friendly tabs. This grouping ability applies to both Blazor WebAssembly (WASM) and Server-side Blazor apps. The Blazor TabStrip UI component has built-in features that allow you to set conditions to disable select tabs and add dynamic elements and responsive animations. You can control which tab is currently visible or make any changes based on user persistence. You have the flexibility to show the content you want within a tab collection to simplify the navigation, while offering users a delightful experience.The features that add to the richness of the Blazor TabStrip include TabStrip tabs, tab position, tab persistent state, header template, TabStrip events, theming and TabStrip accessibility and keyboard navigation.

TabStrip TabsThe Blazor TabStrip component is designed with different configuration parameters:

  • Title – You can quickly designate the tab heading text you want presented.
  • Visible – Control the tab visibility.
  • Disabled – Easily select tabs to disable or enable them.

Tab Position

The Blazor TabStrip allows you to modify it in a way that best fits your application layout and goals. You can opt to place tab headers at the top, at the bottom or to the left or right of the content—that choice is yours.

TabStrip Persist State

In the event you want the content to persist when changing tabs, you can easily configure the Blazor TabStrip component to accommodate this request.

Header Template

If you wish to work with templates to control the content of each tab header, the TabStrip component allows you to offer rich content to your users through the utilization of icons or other Blazor components.

TabStrip Events

Tracking when a user has selected a tab along with restricting access to certain tabs is controlled through the ActiveTabIndexChanged event. You determine the events you want to apply for tracking purposes and then the TabStrip events feature will handle the rest for you.

Tab Strip Accessibility and Keyboard Navigation

Semantic HTML and adherence to web accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) help screen readers read the TabStrip content. Out-of-the-box keyboard support lets your users navigate the tabs without a mouse.

TabStrip Theming

The Telerik UI for Blazor TabStrip component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which resembles the Bootstrap styling). Right out of the box with a few lines of CSS, you can create your own custom theme that meets your design standards.

This TabStrip Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.