ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Tab control
  • Overview
  • Image associated with the text of the tab
  • Image of the tab pane
  • Which image to use?
  • Manage stretching of shutter button images
  • How to associate an image with a tab pane
  • Background color/Background image of tabs
  • Tabs on a page
  • Image formats
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Overview
To optimize the appearance of your screens, WINDEV, WEBDEV and WINDEV Mobile allows you to use images or colors in your Tab controls. For example:
  • Image associated with the text of the tab. This image is displayed next to the text of the tab. Example:
  • Tab image: This image lets you redefine the shape and color of the tab.. Example:
  • Color of tab border. Example:
Remarks:
Image associated with the text of the tab
The image associated with the text of the tab appears next to the text.
WEBDEV - Server code To associate an image with the text of the tab pane:
  1. Open the tab description.
  2. On the "General" tab, select "Details (pane)".
  3. In the "Tab icon" field, select the image to be embedded next to the label using the Drop-down button button next to the field:
    • The "Browse" option allows you to select a file from your computer.
    • The "Catalog" option allows you to select an image from the image catalog.
    • The "Project gallery" option lets you select an image from the project directory.
  4. Validate.
Image of the tab pane
The image associated with the tab pane replaces the existing tab pane. This gives you the ability to redefine the shape and color of the tab pane.

Which image to use?

The image associated with the tab pane must contain two drawings:
  • the drawing corresponding to the normal status of the pane.
  • the drawing corresponding to the pressed status of the pane.
The drawings must be organized in the following order:
  • WEBDEV - Server code Drawing of normal status then drawing of pressed status.
Please note If the shutter is displayed vertically, the shutter image must be vertical.

Manage stretching of shutter button images

To manage the resizing of tabs, it may be necessary to manage the enlargement of panel buttons. You can manage:
  • 3-frame automation stretching.
3-frame automation stretching:
In this case, the shutter image is automatically split into 3 images by WINDEV/WEBDEV.
The following criteria are used:
  • the image is divided into three sections
  • part 1 corresponds to the left area.
  • part 3 corresponds to the right area.
  • section 2 corresponds to the middle area. The size of this section is 16 pixels. If the tab is proportional to the text, this section will be repeated as many times as necessary to fit the text.
Remarks:
  • If part 2 of your image is smaller than 16 pixels, it's advisable not to use a tab pane proportional to the label, and to integrate additional images and the label into the image if necessary.
  • If the tabs have different states, the image associated with the tab must contain all the images that correspond to the different states of the tab.
WEBDEV - Server codePHP

How to associate an image with a tab pane

To associate an image with the tab pane:
  1. Open the tab description.
  2. In the "Style" tab, select the "Tab panel buttons" item.
  3. Specify:
    • the position of the panes.
    • the image path to be used for tab panes, with stretch management mode (3-frame mode if required).
    • the divider color.
  4. Validate.
Background color/Background image of tabs
WEBDEV - Server code

Tabs on a page

WEBDEV allows you to modify the background color and the background image used for each tab pane. To do this:
  1. Display the description of the Tab control.
  2. On the "General" tab, select "Border, Background (pane)".
  3. Modify the desired element:
    • the "Background color" control is used to define the background color of the selected tab pane.
    • the "Background image" control is used to define the background image used for the selected tab pane.
Remarks:
  • You can change the color of the tab frame in the "Style" tab, "Active tab" and "Other tabs" elements.
  • The color of the separator (between panes) can be set in the "Tab pane buttons" style element.
Image formats
See also
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 02/19/2025

Send a report | Local help