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.

Ajustes

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.
• 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. Regular 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.
  • 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: Regular, 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; se aceptan valores de entrada del 0 al 1. Para ver el efecto, defina 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 estilo de los tres estados del botón de navegación: Regular es el estado de botón sin interacción del usuario; Mantener el puntero 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.