ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Tab control
  • Overview
  • Position of tabs
  • Display mode of tabs
  • The different modes
  • Swipe to change pane
  • Shifting tab panes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Display modes of Tab control
Overview
To optimize the style of your tabs, you have the ability to use images and colors. For more details, see Images and tab.
You also have the ability to use:
Position of tabs
When creating a Tab control, the tab panes are positioned at the top of the control.
To modify this position:
  1. Display the description window of Tab control.
  2. In the "Details" tab, select the requested position:
    • at the top,
    • at the bottom,
    • on the left,
    • on the right.
    Android The available positions are at the top and at the bottom .
  3. Validate the control description window.
Remark: If you select a position on the left or on the right, the pane caption remains horizontal by default. To display this caption vertically, don't forget to modify the orientation of the caption in the "Style" tab of the control description:
  1. Display the description window of Tab control.
  2. In the "Style" tab, select the "Caption of active pane" element.
  3. Modify the orientation of the font (0° by default).
  4. Repeat operation 3 for the "Caption of inactive pane" element.
Display mode of tabs
WINDEVAndroid

The different modes

The Tab control proposes different display modes for the tabs:
  • the standard mode (by default): the tab panes are displayed on a line and if there is not enough space, the other tabs are displayed on an additional line:
    Android If there is not enough space, scroll the tabs with the finger to display the hidden panes.
  • the 3 panes mode with sliding: only 3 panes are displayed, and during the click on the first pane or on the last pane, this one moves in the middle:
  • the invisible panes mode: all the panes are invisible.
  • WINDEV the standard mode with +/- buttons: the tab panes are displayed on a line and if there is not enough space, buttons appear, allowing the user to make the panes scroll. The style of these buttons can be modified in the "Style" tab of the control description ("Next/Previous buttons" element).
To define the display mode of tabs:
  1. Display the description window of Tab control.
  2. In the "Details" tab, select the requested display mode.
  3. Validate the control description window.
Android

Swipe to change pane

Regardless of the display mode of the tabs, you have the ability to change tab by swipe. This option allows you to display the content of the previous or next tab via a swipe movement on the screen.
Remark: This option is mainly used to change the content of the tab pane when the tabs are invisible.
Shifting tab panes
WINDEV Regardless of the position of tab panes, you have the ability to shift them in the editor via a specific handle.
Therefore, if the tab panes are positioned:
  • At the top or at the bottom, they can be shifted to the right.
  • On the left or on the right, they can be shifted to the bottom.
The available space allows you to display a logo or a button used to expand options for example.
To shift the position of tab panes:
  1. Select the Tab control.
  2. A specific handle appears in the middle of the side of the first tab.
  3. Select this handle and move it. The area found beside the first tab is enlarged and the different tabs are shifted (to the right or to the bottom according to the orientation of the panes).
  4. The tab panes have been shifted.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 06/02/2022

Send a report | Local help