TabStrip - Position and Alignment

Telerik UI for Blazor TabStrip displays a collection of tabs, containing associated content, which enables the user to switch between different views inside a single component. It allows you to control the position and alignment of its items (tabs).

These Tabs are the building blocks of the TabStrip. The component allows individual configuration of the declared tags.

To customize their position, use the optional TabPosition attribute of the TabStrip tag. It takes a member of the TabPosition enum. The supported position options are:

• Top (default) - If you choose the top position, the tabs will render above the component content. As this is the default tab position option, you do not need to explicitly set it.
• Left - The left position will allow you to render the tabs on the left side of the component content.
• Right - The right position will allow you to render the tabs on the right side of the component content.
• Bottom - The bottom position will allow you to render the tabs underneath the component content.

To customize their alignment, use the optional TabAlignment attribute of the TabStrip tag. It takes a member of the TabStripTabAlignment enum. The supported alignment types are:

• Start (default) - Aligns all tabs to the beginning of the TabStrip header. As this is the default tab position option, you do not need to explicitly set it.
• End - Aligns all tabs to the end of the TabStrip header.
• Center - Centers all tabs within the Tabstrip header, placing them equally distant from both edges.
• Justify - Spreads tabs out to evenly fill the width of the TabStrip header, with equal spacing between each tab.
• Stretched - Expands each tab to equally fill the available width of the TabStrip header, so each tab is the same size.

The current demo allows you to configure the TabStrip tabs position and alignment and test all setups. Use the DropDownLists in the Configurator section to explore the different layouts