Pestañas

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.
• Fuente de página: la página Apps que se 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 el 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ña 1'', ''Pestaña 2'', '''Pestaña 3' y ''Pestaña 4'', entonces ''Pestaña 1'' tiene el índice 0, ''Pestaña 2'' tiene el índice 1, ''Pestaña 3'' tiene el índice 2 y ''Pestaña 4'' tiene el índice 3.

• Oculto: si es verdadero, oculta el control en tiempo de ejecución.

• Deshabilitado: si es verdadero, deshabilita el control en el tiempo de ejecución.

Events

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

Estilo

• Alineación de control: de forma predeterminada, se establece en Estiramiento. Se puede establecer una alineación diferente.

  Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs Horizontal).

• Estilo: el tamaño de las pestañas y el color de una pestaña activa.

• Borde: establece el borde del control. Se pueden configurar el grosor, el color y el radio del borde.

• Fuente: los atributos de fuente para el texto de la pestaña, como la familia de fuentes, el tamaño o el color. Por defecto, 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 superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Margen.

• Tamaño: el ancho y la altura del control. El tamaño está establecido como auto de forma predeterminada. 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

Para mejorar la accesibilidad, puedes usar los siguientes atajos de teclado en la lista de pestañas de la pestaña General del panel de configuración:

• Teclas de flechaarriba y abajo para cambiar la pestaña seleccionada
• Alt+ tecla de flechaarriba para mover la pestaña seleccionada hacia arriba
• Tecla de flecha Alt+Down para desplazar 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 la 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 le í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.