Display modes of Tab control

ONLINE HELP
WINDEV, WEBDEV AND WINDEV MOBILE

Version:

Home | Sign in | French

Overview
Position of tabs
Display mode of tabs
The different modes
Change the pane by swipe
Shifting tab panes

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

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:

the position of tabs: at the bottom, at the top, on the left or on the right. This position can be combined with the orientation of the tab caption.
Versions 18 and later
the display mode of tabs.
New in version 18
the display mode of tabs.
the display mode of tabs.
Versions 21 and later
the shift of panes in the editor.
New in version 21
the shift of panes in the editor.
the shift of panes in the editor.

Position of tabs

When creating a Tab control, the tab panes are positioned at the top of the control.

To modify this position:

Display the description window of Tab control.
In the "Details" tab, select the requested position:
- at the top,
- at the bottom,
- on the left,
- on the right.
  Versions 18 and later
  The available positions are at the top and at the bottom .
  New in version 18
  The available positions are at the top and at the bottom .
  The available positions are at the top and at the bottom .
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:

Display the description window of Tab control.
In the "Style" tab, select the "Caption of active pane" element.
Modify the orientation of the font (0° by default).
Repeat operation 3 for the "Caption of inactive pane" element.

Display mode of tabs

Versions 18 and later

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:
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.
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:

Display the description window of Tab control.
In the "Details" tab, select the requested display mode.
Validate the description window of control.

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

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:
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.
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:

Display the description window of Tab control.
In the "Details" tab, select the requested display mode.
Validate the description window of control.

Change the pane by swipe

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:
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.
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:

Display the description window of Tab control.
In the "Details" tab, select the requested display mode.
Validate the description window of control.

Change the pane by swipe

Versions 21 and later

Shifting tab panes

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:

Select the Tab control.
A specific handle appears in the middle of the side of the first tab.
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).
The tab panes have been shifted.

New in version 21

Shifting tab panes

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:

Select the Tab control.
A specific handle appears in the middle of the side of the first tab.
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).
The tab panes have been shifted.

Shifting tab panes

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:

Select the Tab control.
A specific handle appears in the middle of the side of the first tab.
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).
The tab panes have been shifted.