Pestañas

Propiedades, modos y eventos del control Pestaña para organizar el contenido de la aplicación en pestañas estáticas o generadas dinámicamente.

General

Cuando añades el control Pestaña, se muestran tres pestañas de forma predeterminada (Pestaña 1, Pestaña 2, Pestaña 3). Expandir cada pestaña dentro del control expone las siguientes propiedades:

• Nombre de la pestaña : el nombre para mostrar de la pestaña.
• Origen de la página : la página de Apps para importar dentro de esta pestaña.
• Oculto : si es verdadero, oculta el control en tiempo de ejecución.
• Deshabilitado : si es verdadero, deshabilita el control en tiempo de ejecución.

Las siguientes propiedades se aplican a todo el control Pestaña.

• Añadir nueva pestaña : añade una nueva pestaña a tus datos haciendo clic en el icono más "+".
• Índice de pestaña activa : navega a una pestaña específica utilizando esta propiedad. El índice comienza en 0. Por ejemplo, si tienes cuatro pestañas consecutivas llamadas "Pestaña1", "Pestaña2", "Pestaña3" y "Pestaña4", entonces "Pestaña1" tiene el índice 0, "Pestaña2" tiene el índice 1, "Tab3" tiene el índice 2 y "Tab4" tiene el índice 3.
• Oculto : si es verdadero, oculta el control en tiempo de ejecución.
• Deshabilitado : si es verdadero, deshabilita el control en tiempo de ejecución.

Eventos

• Valor cambiado: configura lo que sucede cuando se cambia el valor.

Estilo

• Alineación de control : de forma predeterminada, está establecido en Estirar. Se puede establecer una alineación diferente.
  Nota:

  La alineación depende del diseño seleccionado para el elemento principal (Vertical u Horizontal).

• Estilo : el tamaño de las pestañas y el color de una pestaña activa.
• Borde : el borde del control. Se puede configurar el grosor del borde, el color y el radio .
• Fuente : los atributos de fuente para el texto de la pestaña, como la familia de fuentes, el tamaño o el color. De forma predeterminada, el control hereda la familia de fuentes del contenedor principal inmediato, que se indica con la palabra clave "heredada".
• Margen : el margen del control. De forma predeterminada, se establece un margen de 4px. Se combinan las propiedades de los márgenes superior/inferior e izquierdo/derecho . Estas propiedades pueden separarse utilizando el botón Enlace situado a la derecha de la sección Margen .
• Tamaño : la anchura y la altura del control. De forma predeterminada, el tamaño está establecido en auto. Para establecer valores mínimos o máximos, haz clic en el icono de tres puntos (...). Si el tamaño del control es menor que las opciones, se muestra una barra de desplazamiento.

Atajos del teclado

For improved accessibility, you can use the following keyboard shortcuts in the tabs list from the General tab in the configuration panel:

• Teclas de flecha arriba y abajo para cambiar la pestaña seleccionada.
• Alt+ tecla de flechaarriba para mover la pestaña seleccionada hacia arriba.
• Alt+ tecla de flechahacia abajo para mover la pestaña seleccionada hacia abajo.

Ejemplo: navegar a la siguiente pestaña

Este ejemplo muestra cómo navegar a la siguiente pestaña de un control Pestañas.

1. En tu aplicación, añade un control de Pestañas. Se creó automáticamente 3 pestañas: "Pestaña 1", Pestaña 2" y "Pestaña 3".

2. Añade dos nuevas páginas y un control de Botón en cada una. Nombra los botones "Pestaña 1 -> Siguiente" y "pestaña 2 -> Siguiente", respectivamente.

3. Para la "Pestaña 1", en el campo Fuente de la página, haz referencia a la página añadida anteriormente que tiene el botón "Pestaña 1 -> Siguiente".

4. Para la "Pestaña 2", en el campo Fuente de página, haz referencia a la página añadida anteriormente que tiene el botón "Pestaña 2-> Siguiente". Tu aplicación debería verse como en la siguiente imagen:

   

5. Crea una regla para cada control de Botón. La regla indica a la aplicación que navegue a la siguiente pestaña al hacer clic en el botón.

6. Crea una variable de aplicación de tipo Int32 y nómbrala "var_tab_index".

7. Selecciona el control Pestañas y asigna la variable var_tab_index al campo Índice de pestaña activa .

   

8. Selecciona la página principal que contiene el control Pestañas, navega a la pestaña Eventos y crea una regla para el evento Cargado.

   1. Añade la regla Establecer valor y configúrala de la siguiente manera:
      • Elemento a establecer : var_tab_index
      • Valor : 0, que es el índice de la pestaña 1.

9. Selecciona la página que contiene el control Botón llamado "Pestaña 1-> Siguiente", navega a la pestaña Eventos y crea una regla para el evento Tras hacer clic.

   1. Añade la regla Establecer valor y configúrala de la siguiente manera:
      • Elemento a establecer : var_tab_index
      • Valor : 1, que es el índice de la pestaña 2.

10. Selecciona la página que contiene el control Botón llamado "Pestaña 2-> Siguiente", navega a la pestaña Eventos y crea una regla para el evento Al hacer clic.

    1. Añade la regla Establecer valor y configúrala de la siguiente manera:
       • Elemento a establecer : var_tab_index
       • Valor : 2, que es el índice de la pestaña 3.

Cuando previsualices la aplicación, haz clic en el botón de la "Pestaña 1" y te desplazará a la "Pestaña 2", y así sucesivamente.