Componentes Interativos: Reveal

O componente Reveal pode ser usado para mostrar e ocultar conteúdo simplesmente passando o mouse ou clicando em determinado elemento. Por exemplo: se desejar exibir uma legenda quando os visitantes passarem o mouse sobre uma imagem, você pode usar o componente Reveal.

 

Ao arrastar o componente Reveal para sua página, você receberá duas caixas.

1-Jan-27-2021-04-49-34-61-PM

 

O Reveal Trigger será a primeira caixa. Basta arrastar qualquer conteúdo que desejar para essa caixa e ela será o que os usuários verão quando chegarem à página.

2-Jan-27-2021-04-49-43-11-PM

O Reveal Container será a segunda caixa. É aqui que você puxará o conteúdo que gostaria de mostrar quando os usuários passarem o mouse ou clicarem no elemento Reveal Trigger.

3-Jan-27-2021-04-49-50-94-PM

Configurações do Reveal 

Ao editar seu componente Reveal, você verá as opções abaixo:

Reveal type

  • Overlay (sobreposição) - exibe o conteúdo do Reveal Container sobre o Reveal Trigger.
  • Toggle (alternar) - exibe o conteúdo do Reveal Container em vez do Reveal Trigger.

Reveals when

  • Hovered (flutuante)- exibe o Reveal Container quando o usuário passa o mouse sobre o Reveal Trigger.
  • Clicked (clicado) - exibe Reveal Container quando o usuário clica em Reveal Trigger.

Position

  • Fornece opções de onde o Reveal Container deve ser exibido. Se o manual for selecionado, ele será exibido onde for publicado na sua página.

4-Jan-27-2021-04-49-59-06-PM

Dicas e truques

Se você parece estar tendo um problema com o componente Reveal no seu navegador Safari ao usar transições flip em mais de um objeto em uma página, basta adicionar o microtema alterando o estilo em Utilities > Animation Wrapper.

 

Lembre-se de que o componente Reveal não adiciona espaço extra a uma página, ele apenas substitui o conteúdo dentro do Reveal Trigger. É por isso que não é possível variar a altura ao mostrar um Reveal Container.