New to Telerik UI for Blazor? Download Free 30-day trial
TabStrip - Tab Positions
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
Tabs Position
- Sofia
- London
- Paris
23ºC
Sunny weather in Sofia.
- Tab-positions.razor
- WeatherCard.razor
Description
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 of its items (tabs). The tab titles display on top of the tab content.
These Tabs are the building blocks of the TabStrip. The component allows individual configuration of the declared
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.
The current demo allows you to configure the TabStrip tabs position and test all setups. Use the DropDownList in the Configurator section to apply the Top, Left, Right, or Bottom positions and explore the differences.