TTabPanel

API Manual

TTabPanel displays a tabbed panel. Users can click on the tab bar to switching among different tab views. Each tab view is an independent panel that can contain arbitrary content.

A TTabPanel control consists of one or several TTabView controls representing the possible tab views. At any time, only one tab view is visible (active), which is specified by any of the following properties:

  • ActiveViewIndex - the zero-based integer index of the view in the view collection.
  • ActiveViewID - the text ID of the visible view.
  • ActiveView - the visible view instance.

If both ActiveViewIndex and ActiveViewID are set, the latter takes precedence.

TTabPanel uses CSS to specify the appearance of the tab bar and panel. By default, an embedded CSS file will be published which contains the default CSS for TTabPanel. You may also use your own CSS file by specifying the CssUrl property. The following properties specify the CSS classes used for elements in a TTabPanel:

  • CssClass - the CSS class name for the outer-most div element (defaults to 'tab-panel');
  • TabCssClass - the CSS class name for nonactive tab div elements (defaults to 'tab-normal');
  • ActiveTabCssClass - the CSS class name for the active tab div element (defaults to 'tab-active');
  • ViewCssClass - the CSS class for the div element enclosing view content (defaults to 'tab-view');

To use TTabPanel, write a template like following:

<com:TTabPanel>
   <com:TTabView Caption="View 1">
     content for view 1
   </com:TTabView>
   <com:TTabView Caption="View 2">
     content for view 2
   </com:TTabView>
   <com:TTabView Caption="View 3">
     content for view 3
   </com:TTabView>
 </com:TTabPanel>