| Note | ||
|---|---|---|
| ||
As of July 25th, 2023, there is a content freeze on this page. |
Note: a newer, layout-based Tab Panel Layout is available. We recommend using the more powerful, less error-prone Tab Panel Layout over Tab Panels. Tab Panel Layouts can be styled using CSS rules.
To create a custom tab panel widget, a tab panel style must first be added to the pui.widgets.tabStyles associative array. Each entry in pui.widgets.tabStyles is an object with name/value pairs; the following are possible names:
| Property Name | Possible Values | Description | Requirement(s) |
|---|---|---|---|
| useImages | true/false | Determines if images are provided and used in the drawing of a tab panel. | The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name:
|
| hiImages | true/false | Determines if highlight images are provided and used when the cursor hovers over a tab. | The following images are needed in the IFS Directory location /www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name:
|
| imageFileExtension |
| Specifies image file extension used for Tab Panel images. | Optional |
| height | Any valid pixel value | Determines the tab height in pixels. | Digits Only |
| defaultBackColor | Any valid color name or hex value | Sets the default background color of the active tab. |
|
| hiColor | Any valid color name or hex value | Sets the highlight color of non-selected tabs when cursor hovers over. |
|
| leftWidth | Any valid pixel value | Sets the width of the left side image. | Digits Only Should match width of provided image.
|
| rightWidth | Any valid pixel value | Sets the width of the right side image. | Digits Only Should match width of provided image.
|
| selColor | Any valid color name or hex value | Determines color of active tab. |
|
| selBold | true/false | Determines if active tab header is also bold. | useImages needs to be set to true |
| borderColor | Any valid color name or hex value | Sets the color of the Border. |
|
| leftMargin | Any valid pixel value | Sets the width of the left side margin of the tabs in pixels. | Digits Only
|
| hiUnderline | true/false | Determines if highlighted, inactive tab header is also underlined. | Optional |
| separated | true/false | Determines if there is a separation gab between the tabs. | useImages needs to be set to true |
| backBar | true/false | Determines if the area behind the tabs, the Back Bar, is visible or transparent. | Optional If set to true, it is required for either backBarColor to be set to a valid color value or an image named |
| backBarColor | Any valid color name or hex value | Sets the color of the Back Bar. | backBar needs to be set to true |
| borderSize |
| Sets the tab panel's border size in pixels. | Digits Only |
| defaultTabColor | | Sets the background color of inactive tabs. |
ProfoundUI Version 5, Fix Pack 13.0 and later. |
JavaScript Syntax for Adding a Tab Panel Style
...