Componentes interactivos: Reveal

El componente Reveal se puede utilizar para mostrar y ocultar contenido simplemente colocando el cursor sobre un elemento determinado o haciendo clic en él. Por ejemplo, si deseas mostrar un título cuando los visitantes se desplazan sobre una imagen, puedes utilizar el componente Reveal.

 

Cuando arrastres el componente Reveal a tu página, ocupara dos containers.

r43_Reveal_Icon copy

El Reveal Trigger será el primer container. Simplemente arrastra cualquier contenido que desees a este container y esto será lo que los visitantes verán cuando lleguen a la página.

r43_Reveal_Trigger copy

El Reveal Container será el segundo container. Aquí es donde estará el contenido que va a aparecer cuando el cursor sea ubicado sobre el elemento Reveal.

r43_Reveal_Container copy

Configuración

Al editar el componente Reveal, verás las siguientes opciones:

Reveal type

  • Overlay (superposición): muestra el contenido del Reveal Container sobre el Reveal Trigger
  • Toggle (alternar): muestra el contenido del Revelar Container en lugar del Revelar Trigger

Reveal when

  • Hovered: muestra el contenido del Reveal Container cuando se pasa el mouse sobre el Revelar Trigger
  • Clicked: muestra el contenido del Reveal Container cuando se hace clic en el Revelar Trigger

Position

  • Opciones sobre dónde se debe mostrar Reveal Container. Si se selecciona la opción manual, se mostrará donde está publicado.

r43_Reveal_Published

Si te deparas con algún problema con el componente Reveal en Safari al usar transiciones del tipo "flip" en más de un objeto en la página, simplemente agrega el micro-tema Utilities > Animation Wrapper al container donde están ubicados los Reveals.