Example of Orientation in ASP.NET MVC Tabs Control

This sample demonstrates the header orientation of the Tab. Select option from drop-downs to switch header placement and changing the header style in properties panel.

DEMO

SOURCE

Header Placement
Header Styles

The Tab allows to place the header section inside the Tab component either at top / bottom / left / right position by using headerPlacement property.

This sample illustrates the use of header placement and showCloseButton property. Users can change the header position by changing the drop-down value options and can close the Tab item by clicking close icon in header.

The User can also view different header styles of Tab component by selecting options from `Header Styles` drop-down. Header styles changed by adding predefined classes in Tab root element and it class names listed below

Material and Fabric theme differentiates all the available tab header styles such as e-fill, e-background e-accent.
In bootstrap theme, all the styles such as e-fill & e-background e-accent will have the same look with no difference.

If above classes not included in root element default style will applied in Tab component.

More information about Tab can be found in this documentation section.