Version

Tab States

WebTab™ can have tabs with different states that are indicated by different visual styles and that are individually customizable using the Infragistics® Application Styling Framework. The following are the different states that a tab can have:

  • Normal – This is the state when no action is performed on the tab.

  • Hovered – When the end user hovers the mouse over a tab, the hover style is applied on that tab. In this state, the tab is neither selected nor activated.

  • Selected – When the end user clicks on a tab, the tab is selected; if the Enter or SPACE key is pressed on a tab, the tab is also selected.

  • Activated – When the end user clicks on a tab or navigates using the keyboard and hits the Enter key, the tab gets activated. Upon click, a tab will be activated as well as selected. If a tab is activated by the end user using the keyboard and pressing the Enter key, then the tab becomes selected; the tab’s corresponding events will fire.

  • Disabled – hover, selection or activation style is applied on that item.

These states are enabled by default. You can also disable these states by using the following properties of the TabItemStates object:

In HTML:

<TabItemStates EnableHover=" />

In Visual Basic:

WebTab1.TabItemStates.EnableHover = false

In C#:

WebTab1.TabItemStates.EnableHover = false;
Note
Note:

The more states are enabled, the higher the possibility of the tabs flickering when a state is changed or when the page is complex and has large resources. Disabling particular states may reduce flickering of tab items, though the end user will get a simple UI.

You can also set you own Css classes to these states using the TabItemCssClasses property.

In HTML:

<TabItemCssClasses ActiveCssClass="active" DisabledCssClass="disable"
                HoverCssClass="hover" SelectedCssClass="select" />

In Visual Basic:

'Assuming active, disable, hover and select as your Css classes
WebTab1.TabItemCssClasses.ActiveCssClass = "active"
WebTab1.TabItemCssClasses.DisabledCssClass = "disable"
WebTab1.TabItemCssClasses.HoverCssClass = "hover"
WebTab1.TabItemCssClasses.SelectedCssClass = "select"

In C#:

//Assuming active, disable, hover and select as your Css classes
WebTab1.TabItemCssClasses.ActiveCssClass = "active";
WebTab1.TabItemCssClasses.DisabledCssClass = "disable";
WebTab1.TabItemCssClasses.HoverCssClass = "hover";
WebTab1.TabItemCssClasses.SelectedCssClass = "select";