Item com thumbnail é um componente Item com três subcomponentes: imagem, texto <h2> para o título e texto <h3> para subtítulo. O componente item Item com thumbnail se diferencia do componente lista Lista com thumbnail por não precisar estar associada a uma fonte de dados, podendo ser alimentada manualmente.
Figura 1 - Exemplo do componente rodando no simulador
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
| Nome | Propriedade | Função |
|---|---|---|
| Origem | src | Campo para informar o endereço da imagem, podendo ser local ou uma url externa. |
Título | content | Esse campo define Altera o texto que é exibido ao usuário. Nesse caso, ele define o título do componentedo título. |
Subtítulo | content | Esse campo define Altera o texto que é exibido ao usuário. Nesse caso, ele define o subtítulo do componentedo subtítulo. |
| Tema do subtítulo | xattr-theme | Seleciona o tema (cor) do subtítulo no item. |
Tema do título | xattr-theme | Seleciona Define o tema (cor) do título no item. |
| Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente, mas pode ser alterado. |
Referência | href | Abre Ao clicar no item, a URL inserida no campo da propriedade ao clicar no itemé aberta. |
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou ocultar o componente. |
| Posição da imagem | xattr-image-position | Define a posição da imagem no item, podendo ser na esquerda ou na direita. |
Posição do texto | xattr-text-position | Define a posição do título e subtítulo do item, podendo ser na esquerda, no centro ou na direita. |
Repetir | ng-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
| Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Origem
A propriedade origem faz referência a imagem presente no componente e pode mostrar imagens presentes na IDE quanto as Origem alimenta o componente Imagem dentro do Item com Thumbnail, permitindo exibir imagens presentes no projeto ou externas, através de URL. Ao clicar no menu "...", uma janela abrirá listando todas as imagens presentes na IDE que podem ser vinculadas ao componente imagemno projeto mobile.
Figura 2.1 - Selecionando imagem presente na IDEno projeto
Outra forma é informar no campo a URL de uma imagem para que o componente renderize.
Figura 2.2 - Adicionando URL no campo origem
Tema
A propriedade tema, tanto para título quanto para o subtítulo, permite personalizar e padronizar em 9 temas (cores) distintos: assertive (vermelho), balanced (verde), energized (amarelo), light (branco), stable (cinza claro), calm (azul claro), positive (azul royal), royal (lilás) e dark (cinza escuro).
Figura 2.3 - Tema do título (Assertive) e tema do subtítulo (Royal)
Posição
A propriedade posição, tanto para imagem quanto para texto, permite mudar a posição do conteúdo existente no componente de acordo com o que foi selecionado nos botões (Figura 2.4).
Figura 2.4 - Posição do texto (centro) e posição da imagem (direita)
Nome do inglês
Thumbnail Item
Nessa página
Índice
Compatibilidade
- Formulário mobile
Equivalente web
Não possui.
Botão do componente
Imagem no editor visual