Tab panel

Tab panel component

The tab panel is used to show a number of sub forms in a form.

Table of contents

• Tab panel properties
• Tab panel events
• Tab panel API

Tab panel properties

The component has the following properties:

Property	Type	Default	Description
closeIconStyleClass	styleclass		Class to style the optional tab close icon
containerStyleClass	styleclass		Class to style the outer container
height	Number		The minimum height of the component
showTabCloseIcon	Boolean	false	Whether the component should show an icon to allow to close a tab
styleClass	String		Style class of this component
tabs	tab[]		The tabs to be shown
tabSeq	Number		Tab sequence index of the form
visible	Boolean	true	Whether the component is visible or not

Tab panel events

The component allows to attach handlers for the following events:

Event	Parameters	Return	Description
onChange	previousIndex:Number, event:JSEvent		Fired after a different tab is selected
onTabClicked	event:JSEvent, clickedTabIndex:Number, dataTarget:String		Fired when the user clicks on a tab. When false is returned, the tab switch is prevented. The dataTarget parameter can be used in custom HTML rendered as the tab's text to determine where in the HTML the click occurred.
onTabClose	event:JSEvent, clickedTabIndex:Number		Fired when the user clicks on the tab close icon. When false is returned, the tab close is prevented

Tab panel API

The component offers the following API methods:

Method	Parameters	Return	Description
addTab	form:form, tabText:String, index:Number	tab	Adds the given form as a new tab
getTabAt	index:Number	tab	Returns the tab at the given tab index (0 based)
removeTabAt	index:Number		Removes the tab at the given tab index (0 based)
selectTabAt	index:Number		Selects (shows) the tab at the given tab index (0 based)