AYUDA EN LÍNEA
 WINDEV, WEBDEV Y WINDEV MOBILE
Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Pestaña
  • 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
  • How to associate an image with a tab pane
  • Background color/Background image of tabs
  • Tabs in a window
  • Tabs on a page
  • Image formats
WINDEV
WindowsLinuxJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac Catalyst
Otros
Procedimientos almacenados
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:
  • WINDEVWINDEV Mobile To use a "Transparent" tab, simply select "Transparent" as the background color for the internal frame ("Style" tab in the field description, "Internal frame" item).
  • You can also modify the appearance of the tabs by modifying display mode of tabs.
Image associated with the text of the tab
The image associated with the text of the tab appears next to the text.
WINDEVWINDEV Mobile To associate an image with the text of a tab:
  1. Open the tab description.
  2. On the "General" tab, select the desired pane in the list of panes on the left.
  3. The description of the selected pane appears in the area on the right.
  4. In the "Image" field, select the image to be embedded next to the label using the Drop-down button button:
    • The "Browse" option allows you to select a file from your computer. You have the ability to specify the number of states for the image.
    • The "Project gallery" option lets you select an image from the project directory.
    • The "Catalog" option allows you to select an image from the image catalog.
  5. Validate.
Remarks:
  • The "Style" tab lets you set the image associated with the tab label using the "Active pane label" and "Inactive pane label" elements. You can define:
    • label font options,
    • the position of the label and image in the pane. Image position can be independent of label position.
    • Novedad versión 2025
      a margin between image and text to prevent them from "sticking" together.
      Note: This parameter is only available from version 2025 Update 1.
    • a margin around the "Label + image" set in the.
  • Novedad versión 2025
    In the "Style" tab, the "Force to monochrome" item can be used to force images in the Tab Control to be drawn in monochrome, using a defined color. This option is particularly useful when using palettes, so that tab images follow the color used in the current palette.
    Note: This parameter is only available from version 2025 Update 1.
WEBDEV - Código Servidor 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 "Ícono de la pestaña" 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:
  • WINDEVWINDEV Mobile Drawing of pressed status then drawing of normal status.
  • WEBDEV - Código Servidor 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.
  • Novedad versión 2025
    WINDEVWINDEV Mobile A 9-frame stretch.
    Note: This parameter is only available from version 2025 Update 1.
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.
Novedad versión 2025
WINDEV Stretching with 9 images:
In this case, it is possible to configure image stretching by setting the various fixed and non-fixed zones. For more details on this setting, see 9-slice scaling. Note: This parameter is only available from version 2025 Update 1.
WINDEVWINDEV Mobile

How to associate an image with a tab pane

To associate an image with the tab pane:
  1. Open the tab description.
  2. On the "Style" tab, select the "Images of panes" element.
  3. Unroll the "Shutter images" button. In the popup that appears:
    • Select the paths corresponding to the image paths to be used for tab panes. Several images may be required according to the position of the tab pane and according to its display mode.
      Novedad versión 2025
      Note: If you specify only the first image, the other images will be automatically deducted.
    • Specify the stretching mode for shutter buttons.
      Linux Not available.
    • WINDEV Specify the number of steps in the animation.
      Linux Not available.
  4. Novedad versión 2025
    If buttons are defined by an image, it is possible to use the button background color defined in the "Active panel" and "Inactive panel" elements.
  5. Validate.
Note: In some cases, it is not necessary to use an image to redefine the shape and color of a tab. In fact, the style of the "Active shutter" and "Inactive shutter" elements allows you to specify:
  • a background color,
  • a frame color,
  • a frame. Several options are available.
    Novedad versión 2025
    Using a custom frame, you can define rounding, border, line thickness and color options for each edge of the frame.
WEBDEV - Código ServidorPHP

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
WINDEVWINDEV Mobile

Tabs in a window

You can specify a color for:
  • the bottom of the shutter.
  • the bottom of the tab.
To change the pane background color:
  • Go to the "Style" tab of the control description window.
  • Select the "Internal frame" element and specify the background color to be used.
To change the background color of tabs:
  • Go to the "Style" tab of the control description window.
  • Select the "Active pane" item and specify the background color to be used.
  • Select the "Inactive shutter" item and specify the background color to be used.
Remarks:
  • The "Background color" option is used to define the background color of all the tab panes. You have the ability to choose a "Transparent" color.
  • The "Frame" option lets you redefine the shape of the tabs button.
WEBDEV - Código Servidor

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
WINDEV The following image formats are supported in Windows:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpg ; *.jpeg)
  • Kodak Photo CD (*.pcd)
  • PaintBrush (*.pcx)
  • Adobe Photoshop Format (*.psd)
  • TrueVision TARGA (*.tga)
  • Tagged Image File Format (*.tif ; *.tiff)
    Note: the "Tiled TIFF" option in TIFF 6.0 is not supported. In this case, we advise you to save the image in tiff 5.0 standard.
  • Portable Network Graphics (*.png)
  • Windows MetaFiles (*.emf ; *.wmf)
  • Icons (*.ico ; *.icw)
    Remarks:
    • HQ display (High Quality) available.
    • Management of sheets in transparent BMP format (32 bits).
  • Cursors (*.cur)
  • Portable Document Format (*.pdf)
  • Scalable Vector Graphics (*.svg)
  • WINDEV images (generated by the image editor, *.WDPIC).
  • Novedad versión 2025
    Images in WebP format (*.webp).
Android The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
iPhone/iPad The following image formats can be displayed:
  • Bitmap (*.BMP)
  • Graphics Interchange Format (*.gif)
  • Joint Picture Experts Group (*.jpeg)
  • Portable Network Graphics (*.png)
  • Icons (*.ico ; *.icw)
Ver también
Versión mínima requerida
  • Versión 9
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 19/02/2025

Señalar un error o enviar una sugerencia | Ayuda local