Imagem

1. Geral

O componente "Imagem" é utilizado para exibir imagens estáticas ou dinâmicas, provenientes do banco de dados. Este componente é ideal para diversos contextos, como exibir fotos de produtos em uma lista de produtos, mostrar avatares de colaboradores em uma lista de equipe, ou para criar interfaces visualmente atrativas.

2. Como Configurar

Arraste para a Tela: Arraste o componente imagem para a tela onde deseja exibir a imagem.

Configurar a VIEW: Configure a VIEW através de SQL, VIEW Análise de Dados ou VIEW de Cadastro caso queira que a imagem seja dinâmica e provenha do banco de dados. A VIEW deve retornar o valor da URL da imagem desejada na primeira coluna e primeira linha.

3. Personalizar

3.1. Configurações Gerais

Imagem: Você pode definir uma imagem estática ou o endereço do arquivo diretamente. Para tornar a imagem dinâmica, ative a opção "Definir imagem com base em VIEW", que fará com que a imagem seja carregada a partir da URL retornada pela VIEW.

Manter Proporção: Padrão que mantém a proporção da imagem dentro do espaço do componente.

Formato da Imagem:

• Cobrir: A imagem cobre todo o componente, mantendo a proporção e aplicando um efeito de zoom para preencher o espaço.

• Formas:

  • Círculo: Exibe a imagem em formato circular.

  • Quadrado: Exibe a imagem em formato quadrado.

  • Quadrado com Bordas Suaves: Exibe a imagem em formato quadrado com cantos arredondados.

3.2. Animação

As opções de animação incluem:

• Transição: Ative para adicionar um efeito de mudança ao passar o cursor sobre a imagem.

• Cor da Transição: Defina a cor de fundo durante a transição.

• Elevação: Ative para adicionar um efeito de sombreamento que adiciona profundidade à imagem.

• Nível da Elevação: Defina o nível de profundidade da elevação.

3.3. Visibilidade Dinâmica

A funcionalidade de Visibilidade Dinâmica permite que a imagem fique visível ou invisível de acordo com o valor retornado por uma VIEW. A imagem desaparecerá se o valor retornado for 0 ou null e aparecerá para qualquer outro número. Esta funcionalidade pode ser aplicada utilizando a VIEW do próprio componente ou a VIEW da tela, oferecendo flexibilidade na configuração e controle do comportamento dos componentes.

• Referenciando a VIEW do próprio componente: Baseia-se na primeira linha e coluna retornada pela VIEW para determinar a visibilidade.

• Referenciando a VIEW da tela: Utilize comandos de variáveis, como "$A1", para pegar o valor da primeira linha e coluna da VIEW da tela.

3.4. Reatividade

Assim como no componente Label, a Imagem também pode ser configurada para atualizar manualmente componentes específicos quando necessário. Para mais informações, consulte a documentação "Reatividade".

4. Interações

A Imagem aceita as seguintes interações:

• Ação: Defina uma ação para ser executada ao interagir com a imagem.

• Ação de Database: Permite realizar operações de manipulação de dados, como INSERT, UPDATE, DELETE, ou chamar PROCEDURES.

• Formulário: Abra um formulário ao interagir com a imagem.

• Modal: Abra um modal ao interagir com a imagem.