Page cover

Thumbnail Tools

O Thumbnail Tools é um componente complementar que adiciona informações e interatividade a thumbnail


Uso

O Thumbnail Tools é usado para enriquecer os thumbnails com informações adicionais e interações. Ele é aplicado em cenários onde é necessário mostrar elementos como botões de ações, indicadores de progresso, ícones de curtida, índices de posição ou contadores de tempo diretamente sobre o thumbnail.


Anatomia

❖. Container

  • É a estrutura base do componente e recebe a aplicação de BG de acordo com a variante definida.

1. Slots (Opcionais)

  • Os slots permitem personalizar os elementos exibidos dentro do componente, como ícones, botões ou indicadores.


Variantes

Clear

Use essa variante quando o thumbnail não precisar de um fundo adicional, mantendo a transparência total.

Hover

A variante Hover é indicada quando você quer mostrar ações ou informações extras apenas no momento de interação do usuário.

Overlay

Use a variante Overlay quando for necessário adicionar um fundo semi transparente para destacar informações.


Use Cases


Histórico de Atualizações

Figma
Gitbook
Android
iOS
Web

02/12/2024

02/12/2024

-

-

Atualizações por data

Dezembro de 2024

02/12/2024

  • Criação do componente

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.

Atualizado