Pestañas

General

The tab control lets you divide the information in your app by tabs. The behavior of the tab control differs depending on the selected mode: Static or Dynamic.

Static tabs

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:

• Tab name—The display name of the tab.
• 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 el tiempo de ejecución.

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

• Add new tab—Add new tab to your data by clicking the plus "+" icon.
• Active tab index—Navigate to a specific tab using this property. The index starts at 0. For example, if you have four consecutive tabs named "Tab1", "Tab2", "Tab3", and "Tab4", then "Tab1" has the index 0, "Tab2" has the index 1, "Tab3" has the index 2, and "Tab4" has the index 3.
• Hidden—If true, hides the control at runtime.
• Disabled—If true, disables the control at runtime.

Dynamic tabs

Dynamic tabs are generated at runtime from a list data source. To use this feature, select the Dynamic mode for your tabs. This is useful when the number of tabs you need varies and depends on the items in a list.

You can configure the following properties:

• 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.
• Column—When the list source is either of type DataTable or an array of an Object, select the specific column (for DataTable data types) or the specific property (for Object arrays).
• Page source—The App page to use across all dynamic tabs.
• Active tab index—Navigate to a specific tab using this property. The index starts at 0. For example, if you have four consecutive tabs named "Tab1", "Tab2", "Tab3", and "Tab4", then "Tab1" has the index 0, "Tab2" has the index 1, "Tab3" has the index 2, and "Tab4" has the index 3.

For example, you can use dynamic tabs with Data Service entities, as follows:

• The List source property for the dynamic tabs is an entity in Data Service, for example, "Department":

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

• The Column property for the dynamic tabs is a field of the selected Data Service entity, for example "Name".
  Note: At runtime, you see as many tabs as the number of records in the selected entity field. The control is limited to displaying 50 records of your entity. If you have more than 50 records, the first 50 are displayed.
• For Page source, you can set up a page to display a table that updates based on the selected tab.

At runtime, the tabs you see are the records in the Name field of the Department entity. Switching tabs updates the content in the table.

Events

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

Estilo

• Control Alignment—By default, it is set to Stretch. A different alignment can be set.

  Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs 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.

• Borde : el borde del control. Puede configurar el grosor, el color y el radio del borde.

• Font—The font attributes for the tab text, such as font family, size, or color. By default, the control inherits the font family of the immediate parent container which is indicated by the keyword "Inherited".

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

• 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, selecciona los tres puntos (...). Si el tamaño del control es menor que las opciones, se muestra una barra de desplazamiento.

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.
SelectedItem	Apps.Controls.TabularInitClass	The currently selected tab in the Tabs control.

Importante:

For Static mode, SelectedItem and ActiveTabName are the same.

For Dynamic mode:

• If the data source uses primitive types, SelectedItem and ActiveTabName are the same.
• If the data source is a data table or a list of objects, SelectedItem contains the full selected record. ActiveTabName shows only the name visible on the tab.

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