Como ele é
Uma barra no topo traz o botão de comentar, a dica de atalho e a contagem de comentários abertos. No modo comentar, o cursor vira uma mira e cada clique solta um pin em forma de gota, com as iniciais de quem comentou e um número pequeno no canto. Cada autor ganha uma cor fixa. Clicar num pin abre um balão branco com a conversa, os tempos relativos, o campo de resposta e o botão de resolver; resolvido, o pin esmaece e sai da arte. À direita fica um painel com abas de abertos e resolvidos e um filtro de busca.
Você pode estar procurando isto se pediu algo assim
- deixar o cliente comentar em cima da arte, tipo Figma
- clicar num ponto da imagem e escrever um comentário ali
- bolinhas numeradas com comentários sobre a tela do protótipo
- aprovação de layout com comentários e opção de marcar como resolvido
- área de revisão de documentos com uma conversa em cada ponto
- quero que a equipe aponte ajustes direto no print do site
- feedback visual em cima da página sem usar ferramenta externa
Também chamado de
- camada de comentários
- comentários com pins
- comment pins
- anotações sobre imagem
- visual feedback
- design review comments
- comment threads
Quando usar
- Aprovação de artes, banners e peças de campanha com o cliente dentro do seu sistema
- Revisão de telas e protótipos em portais de agência ou de produto
- Comentários sobre plantas, contratos ou documentos exibidos como imagem
- Fluxos de QA em que a equipe aponta defeitos visuais na própria tela
Quando evitar
- Comentários que precisam acompanhar um trecho de texto que muda de lugar, já que o pin guarda só uma posição em porcentagem
- Telas de celular muito estreitas, em que o painel lateral fica escondido
Como pedir para a sua IA
Coloque uma camada de comentários estilo Figma sobre a prévia das artes no meu portal de aprovação: pins numerados com conversa, resolver e reabrir, painel com filtro, atalho C para o modo comentar, navegação por teclado e eventos para salvar tudo na minha API.
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 Comments Layer
Onde o Comments Layer guarda os comentários?
No estado do seu app. O Comments Layer trabalha com v-model e emite um evento para cada novo pin, resposta, resolução, reabertura e movimento, com a posição em porcentagem. Para que todos vejam os mesmos comentários, ligue esses eventos à sua API ou a um banco em tempo real; o componente não traz servidor próprio.
Posso usar o Comments Layer sobre qualquer conteúdo?
Sim. O Comments Layer recebe o conteúdo pelo slot, então funciona sobre imagem, captura de tela, protótipo ou documento. Os pins ficam em porcentagem da área, por isso acompanham a área quando ela muda de tamanho. Sem slot, a demonstração mostra uma arte fictícia com quatro comentários.
O Comments Layer funciona pelo teclado?
Funciona. No Comments Layer, a tecla C liga e desliga o modo comentar, N e P ou as setas passam pelos pins abertos, Enter abre a conversa e Esc fecha. Criar, resolver e mover comentários gera um aviso para leitores de tela.
