Namespace: PP.Ui;
TabControl
The TabControl class implements the TabControl component: a control that includes several items that use the same working space.
PP.initClass(PP.Ui.TabControl, PP.Ui.Control, "TabControl");
| Constructor name | Brief description | |
| TabControl | The TabControl constructor creates an instance of the TabControl component. |
| Property name | Brief description | |
| AddTabButtonTemplate | The AddTabButtonTemplate property determines a tab template on adding it to the panel. | |
| Background | The Background property sets background for the component panel. that houses tabs' headings. | |
| BlockUpdateSize | The BlockUpdateSize property determines whether locking of component resizing is enabled. | |
| Buttons | The Buttons property contains an object with arrays of buttons for each side of the control. | |
| ContentAutoFit | The ContentAutoFit property determines autofit of the control contents to the parent element. | |
| DragDropEnabled | The DragDropEnabled property determines whether tabs can be moved using the Drag&Drop mechanism. | |
| EnableDelete | The EnableDelete property determines whether tabs can be deleted. | |
| EnableDragOutside | The EnableDragOutside property determines whether a tab can be dragged out from the control. | |
| EnableDropFromOutside | The EnableDropFromOutside property determines whether a tab can be inserted from another control. | |
| EnableEdit | The EnableEdit property determines whether tab headers can be edited. | |
| EnableGroupSeparator | The EnableGroupSeparator property determines whether there is a separator between groups of tabs. | |
| ImagePath | The ImagePath property sets the path to the folder with component images. | |
| IsAddTabButtonVisible | The IsAddTabButtonVisible property determines whether a tab for adding new tabs is displayed. | |
| Items | The Items property contains an array of control tabs. | |
| MenuAddItems | The MenuAddItems property determines the menu for adding tabs. | |
| PaddingLeft | The PaddingLeft property determines value of the left padding of control tabs panel. | |
| SelectedIndex | The SelectedIndex property sets index of the selected tab. | |
| SelectedItem | The SelectedItem property sets, which of the tabs is selected. | |
| SelectOnStartEditing | The SelectOnStartEditing property determines whether tab header is selected on double-click. | |
| TabsHeight | The TabsHeight property determines height of control tabs. | |
| UseToolBarSwitch | The UseToolBarSwitch property determines the same style of tabs as the toolbar has. |
| Method name | Brief description | |
| addButton | The addButton method adds a button to the TabControl component. | |
| addItem | The addItem method adds a tab to the component. | |
| beginUpdate | The beginUpdate method disables rerendering of control until the endUpdate method is called. | |
| clear | The clear method removes all tabs of a component. | |
| endUpdate | The endUpdate method enables rerendering of control and refreshes it. | |
| getActiveItem | The getActiveItem method returns the selected control tab. | |
| getContentPanel | The getContentPanel method returns the DOM node that stores tabs contents. | |
| getItemByPoint | The getItemByPoint method returns control tab by the specified coordinates. | |
| getItemsList | The getItemsList method returns the list of tabs in the drop-down component panel. | |
| getLayoutItems | The getLayoutItems method returns an array of control tabs. | |
| getPanel | The getPanel method returns the panel of control tabs. | |
| getToolBarButtonByTabItem | The getToolBarButtonByTabItem method returns a button of control tab toolbar. | |
| getToolBarButtonTemplate | The getToolBarButtonTemplate method returns a template of toolbar buttons. | |
| getVisibleTabItemsAtPanel | The getVisibleTabItemsAtPanel method returns array of visible tabs of control toolbar. | |
| hideContent | The hideContent method hides tabs contents. | |
| insertButton | The insertButton inserts a button to the TabControl component. | |
| insertItem | The insertItem method inserts a tab to the specified position. | |
| isElementVisible | The isElementVisible method returns whether the element is visible. | |
| removeItem | The removeItem method removes a tab from the component by its index. | |
| removeItemByIndex | The removeItemByIndex method removes a tab by its index. | |
| scrollToItem | The scrollToItem method scrolls the tabs panel up to the specified tab. | |
| showContent | The showContent method displays tabs contents. |
| Event name | Brief description | |
| AddButton | The AddButton event occurs on adding a button to the tab control. | |
| AddingItemFromMenu | The AddingItemFromMenu event occurs on adding a tab from tab adding menu. | |
| AddMenuShowing | The AddMenuShowing event occurs on opening the tab adding menu. | |
| AfterAddItem | The AfterAddItem event occurs after a new tab is added to the component. | |
| BeforeAddItem | The BeforeAddItem event occurs before adding a new tab. | |
| BeforeShowGroupSeparator | The BeforeShowGroupSeparator event occurs before showing a separator between groups of tabs. | |
| DropedAfterGroupSeparator | The DropedAfterGroupSeparator event occurs after showing a separator between groups of tabs. | |
| ItemDeselected | The ItemDeselected event occurs on closing a tab. | |
| ItemMoved | The ItemMoved event occurs after moving a tab. | |
| ItemSelected | The ItemSelected event occurs on selecting a tab. | |
| SelectableSelected | The SelectableSelected event occurs on the mouse click on the element. | |
| TabDeleted | The TabDeleted event occurs after deleting a tab. | |
| TabDragIn | The TabDragIn event occurs on dragging a tab to the control area. | |
| TabDragOut | The TabDragOut event occurs on dragging a tab out of the control area. | |
| TabEdited | The TabEdited event occurs after exiting the edit mode. | |
| TabEditing | The TabEditing event occurs on switching to edit mode. | |
| TabMenuShowing | The TabMenuShowing event occurs on opening the tab menu. | |
| TextEdited | The TextEdited event occurs on exiting the edit mode if the header text has been changed. | |
| TextEditing | The TextEditing event occurs on exiting the tab header edit mode, even if the header has not been changed. |
| Property name | Brief description | |
| Anchors | The Anchors property determines position of the component placed within container. | |
| Animation | The Animation property sets animation parameters for component. | |
| Bottom | The Bottom property sets bottom offset on placing the component within the LayoutPanel. | |
| Content | The Content property sets the component contents. | |
| ContextMenu | The ContextMenu property sets the context menu for the component. | |
| Data | The Data property is used to store any custom data. | |
| DataContext | The DataContext property contains an object with data. | |
| Enabled | The Enabled property sets whether the component is enabled. | |
| Height | The Height property determines the component height. | |
| IsResizable | The IsResizable property determines whether the component can be resized. | |
| IsRTL | The lsRTL property sets right to left text direction. | |
| IsVisible | The IsVisible property determines whether the component is displayed. | |
| Left | The Left property sets left offset on placing the component within the GridPanel. | |
| Offset | The Offset property determines coordinates of root DOM node of a control. | |
| Opacity | The Opacity property determines component transparency. | |
| Parent | The Parent property determines a parent component of a control. | |
| ParentNode | The ParentNode property sets parent DOM node. | |
| ResourceKey | The ResourceKey property sets the resource key for the component. | |
| Right | The Right property sets right offset on placing the component within the LayoutPanel. | |
| Rotate | The Rotate property sets component rotation angle. | |
| ShowToolTip | The ShowToolTip property determines whether the tooltip of the component can be displayed. | |
| Style | The Style property sets component style. | |
| TabIndex | The TabIndex property sets the order of the control element passing inside the container. | |
| Tag | The Tag property sets JSON object associated with the component. | |
| ToolTip | The ToolTip property determines text of component tooltip. | |
| Top | The Top property sets top offset on placing the component within the GridPanel. | |
| Value | The Value property sets the value to the component. | |
| Width | The Width property sets the component width. |
| Method name | Brief description | |
| The addClass method adds a CSS class to the component. | ||
| addEvent | The addEvent method adds an event handler to a DOM node. | |
| addEventHandler | The addEventHandler method adds an event handler to a DOM node. | |
| addEvents | The addEvents method adds an array of event handlers to a DOM node. | |
| The addStateClass method adds a CSS class to the component and removes the previous CSS class. | ||
| addStyleBySelector | The addStyleBySelector method creates a block that contains a style with the specified CSS selector. | |
| The addToNode method adds a component to the specified node. | ||
| bindEvents | The bindEvents method subscribes an element to all available events. | |
| The clearStylesCache method clears cache of component styles. | ||
| The getAnchorFlags method returns JSON object that contains settings of the current component's position. | ||
| The getClass method returns the current CSS classes of the component. | ||
| The getCssStyle method returns style for the specified node. | ||
| The getDomNode method returns main DOM node of the component. | ||
| The getFocused method determines whether the component is focused. | ||
| getFunctionByName | The getFunctionByName method returns function by name. | |
| getIsBinded | The getIsBinded method returns whether an element is subscribed to all DOM node events. | |
| The hasClass method determines whether the specified CSS class is set for root DOM node of the control. | ||
| The hide method hides a control. | ||
| The hideToolTip method clears tooltip timeout and hides the tooltip if it is displayed. | ||
| The isResingNow method determines whether the component is being resized. | ||
| refreshBindingProperty | The refreshBindingProperty method refreshes the bound property by name. | |
| refreshItemsStyle | The refreshItemsStyle method refreshes CSS styles of child elements. | |
| refreshStyle | The refreshStyle method refreshes element CSS styles. | |
| The removeClass method removes CSS class from the component. | ||
| The removeEvent method removes event handler from DOM node. | ||
| removeEventHandler | The removeEventHandler method removes event handler from DOM node. | |
| removeFromDOM | The removeFromDOM method removes node from the DOM structure. | |
| The removeStateClasses method removes CSS classes of the component. | ||
| The setDraggable method determines whether it is possible to drag component on the HTML page. | ||
| The setFocus method sets the component focus. | ||
| The setIsHovered method displays the component as on hover. | ||
| The setIsPressed method displays the component as if clicked upon. | ||
| The setOpacityIE8 method sets component transparency value in Internet Explorer 8. | ||
| The setSize method establishes the sizes of the component. | ||
| The show method displays a control. | ||
| unBindEvents | The unBindEvents method unsubscribes an element from all standard events. | |
| The updatePosition method updates size and position when absolute positioning based on the current parameters is used. | ||
| The updateSize method updates the component size on changing the size of the container that contains the component. |
| Event name | Brief description | |
| Drag | The Drag event occurs on clicking and holding the left mouse button. | |
| DragEnd | The DragEnd event occurs when dragging the component finishes. | |
| DragStart | The DragStart event occurs when dragging the component starts. | |
| OnContextMenu | The OnContextMenu event occurs on calling context menu of the component. | |
| SizeChanged | The SizeChanged event occurs after the component is resized. | |
| SizeChanging | The SizeChanging event occurs during component resize. |
| Property name | Brief description | |
| Data | The Data property associates a random object with this component. | |
| Id | The Id property sets component identifier. | |
| Settings | The Settings property sets the component parameters. |
| Method name | Brief description | |
| clone | The clone method creates a copy of object. It is not implemented in PP.Ui.Control. | |
| dispose | The dispose method deletes the component. | |
| getTypeName | The getTypeName method returns the name of the object type without the namespace, to which it belongs. |
See also: