Pestañas

General

El control de pestañas te permite dividir la información de tu aplicación por pestañas. El comportamiento del control de pestaña difiere en función del modo seleccionado: Estático o Dinámico.

Pestañas estáticas

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.
• Page - The Apps page to import within this tab.
• 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.

Pestañas dinámicas

Las pestañas dinámicas se generan en tiempo de ejecución a partir de un origen de datos de lista. Para utilizar esta característica, selecciona el modo Dinámico para tus pestañas. Esto es útil cuando el número de pestañas que necesitas varía y depende de los elementos de una lista.

Puedes configurar las siguientes propiedades:

• List source - The source for the items to be displayed as tabs. Valid data types include arrays of String, Integer, or DateTime, DataTable, or arrays of an Object.
• Columna : cuando el origen de la lista es de tipo TablaDeDatos o una matriz de un Objeto, selecciona la columna específica (para tipos de datos TablaDeDatos) o la propiedad específica (para matrices de Objetos).
• Page source - The App page to use across all dynamic tabs.
• Í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.

Por ejemplo, puedes utilizar pestañas dinámicas con entidades de Data Service, de la siguiente manera:

• La propiedad Fuente de la lista para las pestañas dinámicas es una entidad en Data Service, por ejemplo, "Departamento":

  Fetch(of TPDepartment)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})
  

• La propiedad Columna para las pestañas dinámicas es un campo de la entidad de Data Service seleccionada, por ejemplo "Nombre".
  Nota:

  En tiempo de ejecución, verás tantas pestañas como registros haya en el campo de entidad seleccionado. El control se limita a mostrar 50 registros de tu entidad. Si tienes más de 50 registros, se muestran los primeros 50.

• Para Origen de la página, puedes configurar una página para mostrar una tabla que se actualice en función de la pestaña seleccionada.

En tiempo de ejecución, las pestañas que ves son los registros en el campo Nombre de la entidad Departamento. Al cambiar de pestaña se actualiza el contenido de la tabla.

Events

• 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).

• Style - The style of active and inactive tabs:
  • Default - Tabs are styled as classic browser tabs.
  • Pills - Tabs are rounded on both ends, resembling a pill shape.
  • Tab color - The text color for inactive tabs.
  • Active tab color - The text color for active tabs.
  • Tab background - The background color for inactive pill tabs.
  • Active tab background - The background color for active pill tabs.
  • Large tabs - If selected, tabs are enlarged.
• Border - The border for the control. You can configure border Thickness, Color, and Radius.
• 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".
• Margin - The margin of the control. By default, a margin of 4px is set. Top/Bottom and Left/Right margin properties are combined. To set different, separate values for Top, Bottom, Left, and Right margins, select the Link button at the right-hand side of the Margin section.
• Size - The Width and Height of the control. By default, the size is set to auto. To set minimum or maximum values, select the three dots (...). If the size of the control is smaller than the options, a scroll bar is displayed.

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 Pestañas y hazlo Estático. Creaba 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.

![docs image](https://dev-assets.cms.uipath.com/assets/images/apps/apps-docs-image-295016-a2ccddcc-84a5fec8.gif)

Propiedades VB

Propiedad VB	Tipo de datos	Descripción
ActiveTabIndex	Entero	Índice de la pestaña actualmente activa.
ActiveTabName	Cadena	Nombre de la pestaña actualmente activa.
Hidden	Booleano	Si es verdadero, oculta el control en tiempo de ejecución.
Disabled	Booleano	Si es verdadero, deshabilita el control en tiempo de ejecución.