El widget Navegación por vistas proporciona acceso interactivo a las vistas de un widget Sección. Cuando los usuarios acceden a las vistas de la sección, solo se actualiza el contenido de la sección en lugar de toda la página, lo que permite mejorar el rendimiento de la aplicación.
Ejemplo
Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:
- Crea varias vistas de contenido similar en un widget Sección para evitar demasiado desplazamiento en su aplicación. Incluye un widget Navegación por vistas para que los usuarios puedan hacer clic en pestañas o botones o arrastrar un control deslizante para actualizar el contenido de la sección y acceder a las vistas.
Notas de uso
La página debe tener un widget Sección al que poder vincular el widget Navegación por vistas. Debe posicionar el widget fuera de la sección; no puede anidar el widget Navegación por vistas en su correspondiente widget Sección. Por ejemplo, coloque el widget por encima o por debajo de una sección (ideal para pestañas horizontales) o en la parte izquierda o derecha de una sección (ideal para pestañas verticales).
Al agregar un widget Navegación por vistas, aparece la ventana Estilo rápido junto al widget, donde puede seleccionar entre una variedad de estilos, incluidos pestañas, símbolos, un control deslizante y botones de navegación. (Para volver a acceder a esta ventana posteriormente, haga clic en el botón Estilo rápido 
en la barra de herramientas del widget). También puede configurar su propio diseño eligiendo colores y fuentes para los distintos estados del widget en la configuración avanzada.
Para los estilos de pestaña y símbolo, puede incluir todas las vistas de la sección o vistas concretas de esta. Para especificar la secuencia de las vistas, abra el panel de configuración del widget Sección y arrastre las vistas en el orden en que desea que aparezcan en el widget Navegación por vistas. También puede editar los nombres de vistas en los ajustes del widget Sección.
Configuración
El widget Navegación por vistas incluye los siguientes ajustes:
- Vincular con: seleccione un widget de sección desde la página.
Dependiendo del estilo que elija, puede configurar distintos ajustes.
Para los estilos de pestaña (predeterminado, subrayado y pastillas), puede configurar los siguientes ajustes:
- Vistas: defina las vistas que se mostrarán en el widget seleccionando una de las siguientes opciones:
- Automático: incluya pestañas para todas las vistas de la sección.
- Personalizado: incluya pestañas para vistas específicas de la sección.
- Dirección: muestre las pestañas horizontal o verticalmente.
- Espaciado: defina el espaciado entre pestañas en píxeles.
- Alineación: determine la colocación del texto de las pestañas. Por ejemplo, si elige un estilo de píldora horizontal, los nombres de las pestañas se alinean con la pestaña: margen izquierdo o derecho o centrados entre ambos márgenes.
- Mostrar icono: muestre iconos para cada vista. Puede cambiar el icono de cada vista en los ajustes del widget Sección.
- Mostrar texto: muestre una etiqueta para cada vista.
Nota:
Debe activar Mostrar icono o Mostrar texto, o bien ambas opciones.
- Avanzado: invalide el tema de la aplicación para cambiar el color de fondo del widget y aplique estilo a los tres estados de las pestañas para que el usuario disponga de una indicación visual cuando desplace el cursor por una pestaña o la seleccione. Predeterminado es el estado de pestaña sin interacción del usuario; Seleccionado es la selección del usuario de la pestaña, que muestra la vista correspondiente en el widget Sección vinculado y Mantener el puntero es el estado de pestaña cuando un usuario apunta a ella.
Sugerencia:
Para experimentar con estas opciones, haga clic en Vista en directo en la barra de herramientas del builder.
- Texto: cambie el tamaño de fuente (en píxeles) y el color y estilo de la pestaña con formato de negrita, cursiva, tachado y subrayado.
- Icono: cuando Mostrar icono está activado, puede cambiar el tamaño (en píxeles) y el color de los iconos de vista.
- Fondo: elija un color de relleno para la pestaña.
- Borde o Subrayado: elija el color de borde, el estilo (como con guiones o con puntos) y el ancho en píxeles de la pestaña. Para el estilo Subrayado de pestaña solo puede elegir un color y ancho de línea.
- Radio del borde: cambie el tamaño del radio (en píxeles o porcentaje) para dar forma a las esquinas de la pestaña.
Para el estilo Símbolo, puede configurar los siguientes ajustes:
- Vistas: defina las vistas que se mostrarán en el widget seleccionando una de las siguientes opciones:
- Automático: incluya símbolos para todas las vistas de la sección.
- Personalizado: incluya símbolos para vistas concretas de la sección.
- Dirección: muestre los símbolos en horizontal o vertical.
- Espaciado: defina el espaciado entre símbolos en píxeles.
- Alineación: determine la colocación de los símbolos en el widget. Por ejemplo, si elige una dirección vertical, los símbolos se alinean con el contenedor del widget: margen derecho o izquierdo o centrados.
- Información sobre herramientas: habilite la activación de texto que muestre el nombre de la vista.
- Símbolo: seleccione iconos para la vista actual y otras vistas.
- Avanzado: invalide el tema de la aplicación y cambie el color de fondo del widget y el tamaño de los iconos (en píxeles) y el color de los tres estados del símbolo de navegación de la vista: Predeterminado, Seleccionado y Mantener el puntero.
Para el estilo Control deslizante, puede configurar los siguientes ajustes:
- Manipulador de miniaturas: incluya un manipulador (o botón) en el control deslizante para mostrar el progreso a lo largo del recorrido.
- Avanzado: invalide el tema de la aplicación para cambiar el color de fondo del widget y el color de los tres estados del control deslizante:
- Activo: parte completada del recorrido del control deslizante.
- Miniatura: manipulador de miniaturas (o botón) del recorrido del control deslizante. Puede elegir colores de relleno y borde para la miniatura.
- Inactivo: parte no completada del recorrido del control deslizante.
Para los estilos de flecha, puede configurar los siguientes ajustes:
- Dirección: muestra los botones de navegación y el texto en horizontal o vertical.
- Paso: defina cuánto se mueve la sección hacia delante y hacia atrás por cada clic de los botones de navegación. El valor predeterminado es 1. Los valores de entrada aceptables oscilan entre 0 y 1. Para ver el efecto de paso, debe definir una animación de transición para el widget Sección correspondiente.
- Anterior y siguiente: introduzca texto y elija un icono para los botones de navegación.
- Avanzado: invalide el tema de la aplicación para cambiar el color de fondo del widget y el color de la fuente de la paginación (para los estilos Flecha 1 y Flecha 3) y los tres estados del botón de navegación: Predeterminado es el estado de botón sin interacción del usuario, Pasar el cursor es el estado de botón cuando un usuario apunta hacia él y Deshabilitado es el estado de botón en el que no se puede hacer clic si no hay una vista anterior o siguiente.
- Texto: elija un tamaño de fuente (en píxeles), color y estilo para el texto del botón de navegación.
- Icono: cambie el tamaño (en píxeles) y el color de los botones de navegación.
- Fondo: elija un color de relleno para los botones de navegación.
- Borde: elija un color, estilo y ancho (en píxeles) para los bordes del botón.
- Radio del borde: cambie el tamaño del radio (en píxeles o porcentaje) para redondear las esquinas de los botones de navegación.
Opciones de interacción
El widget admite acciones de mensajes, que puede configurar en la pestaña Acción de la configuración del widget. Las acciones de mensajes crean interacciones automáticas entre widgets.
El widget Navegación por vistas admite los desencadenadores Cambio de vistas y Clic en botón. Por ejemplo, puede hacer que un widget Barra lateral se abra cada vez que el usuario cambie de vista con un widget Navegación por vistas. Para ello, agregue ambos widgets a su aplicación. En la configuración del widget Navegación por vistas, haga clic en Agregar un desencadenador, seleccione Cambio de vistas, seleccione el widget Barra lateral como destino y, por último, seleccione la acción Abrir barra lateral.