PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Position of tabs
  • Display mode of tabs
  • The different modes
  • Change the pane by swipe
  • Shifting tab panes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
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. See Images and tab for more details.
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.
      Versions 18 and later
      Android The available positions are at the top and at the bottom .
      New in version 18
      Android The available positions are at the top and at the bottom .
      Android The available positions are at the top and at the bottom .
  3. Validate the description window of control.
Note: 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
Versions 18 and later
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 description window of control.
Android

Change the pane by swipe

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.
Note: This option is mainly used to change the content of the tab pane when the tabs are invisible.
New in version 18
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 description window of control.
Android

Change the pane by swipe

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.
Note: This option is mainly used to change the content of the tab pane when the tabs are invisible.
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 description window of control.
Android

Change the pane by swipe

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.
Note: This option is mainly used to change the content of the tab pane when the tabs are invisible.
Versions 21 and later
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.
New in version 21
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.
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 required version
  • Version 9
This page is also available for…
Comments
Example Control TAB/Wizard
Working with Screen TABs and Wizards

a) switch between tab via code
b) condition the change from one tab to another
c) make a screen wizard only with a button
d) have a local variable to know the current tab that is on the screen

DOWNLOAD
https://repository.windev.com/publish.awp?file_id=281474976710748;example-alter-tab
BOLLER
Jul. 27 2018