Como ele é
Lembra a busca rápida de um computador. Ao apertar Ctrl K, ou ⌘K no Mac, a página escurece e uma caixa branca de cantos arredondados desce de leve no alto da tela, já com o cursor no campo de busca. Os resultados aparecem em grupos, como Navegação, Ações e Recentes, cada um com ícone, nome e, quando houver, atalho em teclinhas, e entram em cascata, um depois do outro. Conforme você digita, as letras encontradas ficam sublinhadas na cor de destaque, e a linha escolhida ganha um fundo suave e uma barrinha na lateral. O rodapé mostra as teclas de navegação e quantos resultados há.
Você pode estar procurando isto se pediu algo assim
- atalho Ctrl K para buscar qualquer coisa no meu sistema
- busca que abre por cima da tela igual ao Spotlight do Mac
- menu de comandos para navegar no painel sem usar o mouse
- barra de busca com resultados agrupados e atalhos de teclado
- achar páginas e ações digitando só parte do nome
- busca rápida para a documentação do meu produto
- deixar meu SaaS com aquele atalho de busca de app profissional
- lista de itens recentes junto da busca
Também chamado de
- paleta de comandos
- busca Ctrl K
- busca rápida
- cmd k menu
- command menu
- quick switcher
- busca global por atalho
Quando usar
- Painéis e SaaS com muitas páginas e ações espalhadas
- Documentação e catálogos em que a pessoa busca pelo nome do item
- Ferramentas internas usadas o dia todo por quem prefere o teclado
- Apps que já mostram atalhos e querem reunir todos num só lugar
Quando evitar
- Sites pequenos, com poucas páginas, em que um menu comum resolve
- Públicos que usam quase só o celular, que perdem o atalho de teclado e dependem do botão
Como pedir para a sua IA
Crie uma paleta de comandos que abra com Ctrl K ou ⌘K no meu painel: diálogo nativo, busca fuzzy que ignora acentos com destaque das letras, resultados em grupos com ícones e atalhos, itens recentes, navegação por setas e Enter, Esc para fechar e entrada sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Trevo
Como ligo os comandos de Trevo às páginas do meu app?
Passe a prop items com id, rótulo, grupo e, se quiser, ícone, atalho e palavras-chave para a busca. Quando a pessoa aperta Enter ou clica, Trevo emite o evento run com o item, e você navega ou executa a ação. O que foi executado entra sozinho no grupo Recentes, com o tempo relativo.
O atalho de Trevo atrapalha o navegador?
Enquanto o componente estiver montado, Trevo captura Ctrl K ou ⌘K antes do restante da página e bloqueia a ação padrão do navegador para essa combinação; ao desmontar, o atalho some. A prop hotkey troca a letra, e uma string vazia desliga o atalho, deixando só o botão de abrir.
Trevo é acessível e funciona no celular?
Sim. Trevo usa um diálogo nativo, que prende o foco e fecha com Esc ou clique fora; o campo de busca é um combobox que anuncia a opção ativa, e a contagem de resultados também é anunciada. No celular, o botão abre a paleta, um toque executa o item e as teclinhas de atalho somem em telas estreitas.
