Find in Page

Uso

O Find in Page deve ser utilizado quando o usuário precisa localizar rapidamente informações em uma página já carregada, sem ocultar conteúdos e mantendo a leitura fluida.

Ele é recomendado para:

• Navegar por conteúdos extensos sem aplicar filtros ou alterar a estrutura da página;

• Realizar buscas com correspondência literal ou contextualizada, facilitando a descoberta de informações relevantes;

• Destacar visualmente os resultados diretamente no conteúdo, promovendo melhor percepção de localização dentro da interface.

Não é indicado para:

• Cenários em que a busca deve alterar a estrutura da interface (ex: filtros ou buscas globais);

• Fluxos que demandam carregamento de novos conteúdos fora da página atual.

Anatomia

❖. Container

• Elemento estrutural do componente, agrupando campo de busca e controles de navegação.

• A borda sinaliza visualmente o estado atual (Rest, Actived, Match ou Error), mantendo consistência em todas as variantes.

1. Placeholder

• Texto orientativo exibido no campo quando não há valor preenchido; obrigatório e adaptável ao contexto de uso.

2. Input Text

• Campo de texto onde o usuário digita a palavra ou expressão buscada; obrigatório em todos os estados a partir de Actived.

3. Input Text

• Indicador visual ativo de escrita, exibido quando o componente está focado (Actived, Match, Error).

4. Find in Page - Controls

Grupo de botões para navegação e controle da busca:

• Número de resultados (X/Y): mostra a posição atual e total de matches; no Error exibe 0/0 e fica desabilitado;

• Próximo/Anterior: navegação suave entre ocorrências;

• Cancelar: retorna ao estado inicial (Rest).

Variantes

Rest

Estado inicial, com placeholder visível e campo inativo. Use quando não houver interação iniciada pelo usuário.

Actived

Exibe o campo pronto para digitação e os controles de navegação. Estado usado durante a entrada da busca, antes de apresentar resultados.

Match

Exibe resultados encontrados com destaques no conteúdo da página, navegação habilitada e contador clicável para reposicionar a visualização.

Error

Indica ausência total de resultados, com contador desabilitado (0/0), sem destaques aplicados ao conteúdo, mantendo o botão de cancelamento disponível.

Comportamento

Destaques no conteúdo da página

Durante a busca (estados Match e Error), o Find in Page interage com o conteúdo exibido na interface destacando visualmente as palavras ou expressões encontradas:

• Match ativo (foco): o resultado atual é destacado com um preenchimento mais forte (fill), alinhado visualmente ao estilo do componente;

• Matches passivos: outras ocorrências são indicadas com tonalidade mais clara e um contorno inferior (outline), permitindo visibilidade sem tirar o foco do resultado ativo;

• Estado Error: não há destaques no conteúdo, sinalizando ausência de correspondências.

Comportamento do contador clicável

O contador X/Y é interativo nos estados de Match, permitindo o usuário clicar diretamente para reposicionar o scroll até o match ativo, especialmente útil quando o usuário rola a página manualmente e deseja retornar rapidamente ao foco.

Animações de navegação

A navegação entre resultados é realizada de forma suave (scroll animado), evitando saltos bruscos e promovendo uma percepção contínua de localização na página.

Use cases

Histórico de Atualizações