Diseño horizontal

Crea una sección que contiene vistas organizadas horizontalmente, una al lado de otra. Cuando esta vista está vinculada a una lista, la sección horizontal se repite para cada elemento de la lista, lo que resulta en un formato similar a una tabla.

El diseño horizontal y el diseño vertical están entre las vistas que se utilizan más comúnmente para diseñar una interfaz de usuario. Utilizadas conjuntamente, las vistas Diseño horizontal y vertical proporcionan la mayoría de las prestaciones de diseño de flujo, que puede utilizar para interfaces de usuario complejas.

Sugerencia: Normalmente, las vistas Diseño horizontal y Diseño vertical del kit de herramientas de IU se utilizan junto con el Panel contraíble.

Propiedades de configuración

En Configuración, establezca o modifique las propiedades de configuración de la vista, como las propiedades de aspecto, respuesta y rendimiento.

Tamaño de pantalla: Una propiedad de configuración que tenga el icono Tamaños de pantalla junto al nombre de propiedad puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como valor predeterminado.

Definiciones de temas: Las definiciones de temas especifican los colores y los estilos de una vista y determinan su aspecto. Puede obtener una vista previa del aspecto de las vistas en el editor de temas. Consulte Temas.

Las propiedades de configuración de aspecto para Diseño horizontal se muestran en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Diseño horizontal
Propiedad de configuración del aspecto	Descripción	Tipo de datos
Flujo de diseño	El diseño de las vistas: Horizontal Desplazamiento en línea horizontal Horizontal ajustado Horizontal con ajuste de línea automático Vertical Vertical ajustado	`String`
Alineación horizontal	La alineación horizontal de las vistas en el diseño: Justificado Izquierda Centro Derecha Nota: Justificado funciona bien en combinación con el flujo de diseño Desplazamiento en línea horizontal ni con Horizontal con ajuste de línea automático. Si utiliza esta combinación puede que obtenga resultados inesperados.	`String`
Alineación vertical	La alineación vertical de las vistas en el diseño. Esta propiedad solo se aplica a los flujos de diseño horizontal. Superior Medio Final	`String`
Ancho	Especifica la anchura de la vista. Puede especificar la anchura en `px` (píxeles), en `%` (porcentaje) o en unidades `em`. Por ejemplo, `50px`, `20%`o `0.4em`. Si no se especifica ningún tipo de unidad, se presupone que es `px`	`String`
Altura	Especifica la altura de la vista en `px` (píxeles) o en unidades `em`. Si no se especifica ningún tipo de unidad, se presupone que es `px`	`String`

Las propiedades de configuración de respuesta para Diseño horizontal aparecen listadas en la tabla siguiente:

Tabla 2. Propiedades de configuración de respuesta para Diseño horizontal
Propiedad de configuración de respuesta	Descripción	Tipo de datos
Sensor de respuesta	(Opcional) El identificador de la vista Sensor de respuesta que contiene este diseño. Si se omite, se utiliza el sensor más cercano dentro del contenedor padre.	`Boolean`
Comportamiento	Especifica cómo debe comportarse la sección según los factores de recuadro que hay definidos en el sensor de respuesta. Nombre de factor de recuadro: El nombre del factor de recuadro del sensor de respuesta al que se aplican estos atributos. Diseño hijo: El diseño que se puede utilizar con el factor de recuadro especificado. Vertical Vertical ajustado Horizontal Desplazamiento en línea horizontal Horizontal ajustado Horizontal con ajuste de línea automático Alineación hija: La alineación que se puede utilizar con el factor de recuadro especificado: Justificado Izquierda Centro Derecha Anchura de hijo: anchura de las vistas hijo que se puede utilizar con este factor de recuadro. Por ejemplo, `60%`. Observe que se pueden especificar más anchuras para las vistas que están incluidas en el diseño. Por ejemplo, `80%`, `20%`. Visibilidad: Los valores de visibilidad que se puede utilizar con el factor de recuadro especificado. Visible Ninguna Oculto Anchura: La anchura de sección que se puede utilizar con el factor de recuadro especificado. Altura: La altura de sección que se puede utilizar con el factor de recuadro especificado. Estilo CSS: Los estilos CSS que se pueden aplicar al factor de recuadro especificado. Clase CSS: Las clases CSS que se pueden añadir al factor de recuadro especificado.	`ResponsiveBehavior[]`

También puede controlar la capacidad de respuesta del contenido anidando el diseño horizontal en una vista Sensor de respuesta .

Las propiedades de configuración de rendimiento para Diseño horizontal se listan en la tabla siguiente:

Tabla 3. Propiedades de configuración de rendimiento para Diseño horizontal
Propiedad de configuración del rendimiento	Descripción	Tipo de datos
Carga asíncrona	Mejora la experiencia con la IU para grandes conjuntos de datos a costa de un tiempo más lento de para cargar las filas en general al empezar a cargar la sección. Esta propiedad solo se utiliza cuando la sección está vinculada a una lista.	`Boolean`
Tamaño de lote asíncrono	Especifica el número de filas que se cargan de forma síncrona en un lote asíncrono. Utilice esta propiedad para optimizar el rendimiento de carga síncrona y asíncrona. Esta propiedad solo se utiliza cuando la sección está vinculada a una lista.	`Integer`

Restricción: La etiqueta de la vista Diseño horizontal no se muestra, a pesar de que la visibilidad de la vista se ha establecido en Mostrar. Para poder etiquetar la vista del diseño Horizontal, es posible que desee utilizarlo conjuntamente con una vista de panel.

Ejemplo

En el diseñador, añada una vista de diseño horizontal a la página, que utilizará como vista de contenedor. Dentro del contenedor, coloque tres vistas de panel, que puede denominar Work Categories, Claim Typey Elements. Establezca las propiedades de cada una de las vistas como se indica a continuación:

Para Diseño horizontal: en Aspecto, establezca Flujo de diseño en Horizontal, Alineación horizontal en Justified, Alineación vertical en Topy Anchura en 750px. Deje Altura en blanco.
Para Work Categories: en Aspecto, establezca Estilo de color en Warningy Ancho en 350px.
Para Claim Type: en Aspecto, establezca Estilo de color en Successy Ancho en 350px.
Para Elements: en Aspecto, establezca Estilo de color en Dangery Ancho en 350px.

En tiempo de ejecución, el resultado muestra tres paneles de la misma altura y anchura, y dispuestos uno al lado del otro dentro de la sección horizontal: Work Categories es amarillo para Warning, Claim Type es verde para Successy Elements es rojo para Danger.

Sucesos

Establezca o modifique los manejadores de sucesos para la vista en las propiedades de Sucesos. Puede establecer que los sucesos se activen mediante programación o cuando un usuario interactúe con la vista. Para obtener información sobre cómo definir y codificar sucesos, consulte Sucesos definidos por el usuario.

El diseño horizontal tiene los tipos siguientes de manejadores de sucesos:

On load: activado cuando se carga la página. Por ejemplo:
```
me.setWidth("100%");
```
On responsive update: Se activa cuando se cambia el tamaño de la sección según el tamaño de pantalla de un dispositivo.

Según el suceso específico, puede utilizar lógica de JavaScript para modificar los efectos de la vista. Puede encontrar más información sobre cómo utilizar sucesos con vistas en el tema Sucesos definidos por el usuario.

Métodos

Para ver los métodos disponibles para el diseño horizontal, consulte la API Diseño horizontal JavaScript .

Recursos adicionales

Para obtener información sobre cómo crear un coach o una página, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidady Atributos HTML), consulte Ver propiedades.