AnexoItem

Tipo: Componente Angular

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-stylesAinda não disponível
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O AnexoItem é utilizado para exibir e gerenciar arquivos anexados ao sistema. Ele permite que o usuário identifique o tipo de documento por meio de ícones, visualize o conteúdo ao clicar e realize a exclusão do arquivo quando necessário.

2. Anatomia e Diretrizes de Escrita

Ícone de Tipo de Arquivo: Ajuda no reconhecimento visual do formato (ex: ícone de imagem para JPG, ícone de documento para PDF).
Rótulo (Label): Descreve a categoria do anexo. Use Caixa de Sentença.
- Exemplo: Comprovante de descarga, Foto da avaria.
Nome do Arquivo (fileName): Exibe o nome real do arquivo salvo. Evite alterar a caixa para manter a fidelidade ao arquivo original.
- Exemplo: canhoto_nf_123.pdf
Ação de Exclusão: Botão de lixeira posicionado à direita. Por ser uma ação destrutiva, utilize cor de destaque (vermelho).
Ação de Clique: Toda a área do nome do arquivo deve ser clicável para abrir a visualização ou download.

Sugestão de padronização

Sugestão de alteração de AnexoItem → FileItem para ter a relação com o FileUploader

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

Angular (mds-angular)

Seletor

mds-anexo-item

Item de exibição para anexos

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`label`	`string`	—	Label do anexo
`anexo`	`AnexoModel \| unknown`	—	Objeto do anexo
`size`	`MdsSizes`	`'md'`	Tamanho do item
`showRemove`	`boolean`	`true`	Exibe ou não a opção de remover
`loading`	`boolean`	`false`	Exibe loading
`disabled`	`boolean`	`true`	Desabilita efeito de clique

Outputs

Output	Payload	Descrição
`onClick`	`void`	Emitido ao clicar no item para baixar o anexo
`onDelete`	`void`	Emitido ao clicar em remover o anexo

Slots

Conteúdo projetado com o atributo data-position:

data-position="content"
data-position="before-content"

AnexoItem — Figma (Design System 2.0) ↗