Skip to content

Vista

Las vistas actúan como páginas para sus widgets.

  • Cada widget debe tener al menos una vista.
  • Los widgets siempre tienen una vista inicial, que es la vista que se muestra cuando el widget aparece por primera vez.

Tipos de Vista

Vista Superpuesta

Las vistas superpuestas flotan sobre otro contenido en un sitio web. Pueden posicionarse en el centro de la pantalla o a lo largo del borde de la página.

Las vistas superpuestas pueden tener un fondo opcional, que se sitúa detrás de la vista cubriendo toda la página. Esto puede usarse para atenuar o iluminar la página de modo que la vista se enfoque visualmente.

Vista Incrustada

Una vista incrustada se inserta en una sección específica de una página. La vista ocupará espacio en la página y afectará el flujo y la disposición de otros elementos.

Selector de Incrustación

El punto de inserción para la vista se especifica como un Selector CSS.

Por ejemplo, el selector #banner_container podría usarse para apuntar a la sección en el siguiente documento HTML:

html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <div id="banner_container">...</div>
    ...
  </body>
</html>

Precedencia del Selector de Incrustación

INFO

La incrustación funciona de manera similar a la función del navegador document.querySelector.

Puede haber situaciones en las que desee tener varios selectores. Por ejemplo, tiene un widget que se muestra tanto en un sitio de escritorio como en uno móvil, los cuales tienen HTML diferente.

Ejemplo de selector de incrustación: #desktop-wrapper, .mobile-embed.

Esto encontraría #desktop-wrapper o .mobile-embed, dependiendo de cuál aparezca primero en el documento. Si solo aparece uno de ellos, esto también es válido y es donde aparecerá su incrustación.

WARNING

Se aconseja probar su incrustación tanto en escritorio como en móvil usando algo como el Modo Dispositivo de Chrome.

Modo de Incrustación

Las vistas incrustadas son añadidas al principio o añadidas al final de la parte de la página a la que apuntan. Esto inserta la vista antes o después de cualquier otro contenido que ya exista en la sección.

Altura del Contenedor de Incrustación

Las vistas incrustadas se crean dentro de un elemento "wrapper" (contenedor), antes de ser insertadas en la página. Por defecto, este elemento contenedor asume automáticamente la altura de la vista misma, pero se puede especificar una altura específica.

Por ejemplo, esto permitiría incrustar y centrar verticalmente una vista en una parte de la página haciendo que la altura del contenedor (wrapper) sea mayor que la de la vista.

Z-Index

La propiedad z-index le permite anular la posición de apilamiento de la vista con respecto a otro contenido en la página.

INFO

Para algunos sitios web, puede ser necesario especificar un valor grande para z-index para asegurar que la vista aparezca por encima de otro contenido en la página.

Transiciones

Las vistas pueden configurarse para hacer una transición a la pantalla cuando se muestran.

INFO

Las transiciones se omiten cuando una vista cambia a otra usando la acción Cambiar a Vista. Esto se hace para permitir el caso de uso común donde un widget tendrá múltiples vistas que actúan como pantallas subsiguientes, como en la plantilla de widget Desplegable de Oferta.