How to configure the Tab Control style on the WEB

Official Content
This documentation is valid for:

The Tab control for web appearance can be configured using the following properties:

Tab Control Class property

It's a control property that determines the Theme Class that will be associated with the Tab control. The predetermined class for Tab controls is "Tab", but you can create other classes under the Tab class in the Theme. See the pictures below.

i2016_05_12_18_59_311_png

TabPage Class

The control's tab pages can be styled using class properties which are grouped under the Tab Class (or any of its descendants).

These properties are as follows:

  • Tab Item Class: Configure the style of the tab control's tab pages.
  • First Tab Item Class: Configure the style of the tab control's first tab page.
  • Last Tab Item Class: Configure the style of the tab control's last tab page.
  • Tab Strip Class: Sets the style for the strip containing all the tab pages. It's a Section class. 

i2016_05_12_19_24_352_png

How to change the effects on hover, focus, and selection of the tab pages

Tab pages can change their style when the user hovers over any them, or when he selects or sets the focus on a tab page.

This is achieved using the following class properties which are grouped under the TabPage class:

  • Selected Class
  • Hovered Class
  • Focused Class

These classes should be TabPage classes or their descendants.
 

i2016_05_12_19_51_353_png

Example

Suppose that you need to have the tab control shown in the following picture:

i2016_05_12_20_43_313_png

The Tab Control Class property is "TabSessions" in this example. The TabSessions class has the following associations:

  • Tab Item Class = TabPageSessions
  • First Tab Item Class = TabPageSessions
  • Last Tab Item Class= TabPageSessions
  • Tab Strip Class = TabSessionStrip

The TabPageSessions and the TabSessionStrip property have the background color set to #458686 and the following font properties:

.TabPageSessions
{
    background-color: #458686;
    text-decoration: none;
    color: white;
    text-transform: uppercase;

}

The TabPageSessions "Selected Class property" is set to TabPageSessionsSelected class. This class sets the ForeColor property to black, as it is the desired design for the selected tab pages.

 

i2016_05_12_20_15_425_png



 



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.