Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 10 Próxima »

Item com thumbnail é um componente Item da lista Simples com três subcomponentes: imagem, texto <h2> para o título e texto <h3> para subtítulo. O componente Item com thumbnail se diferencia do componente 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.

NomePropriedadeFunção
OrigemsrcCampo para informar o endereço da imagem, podendo ser local ou uma url externa.

Título

content

Altera o texto do título.

Subtítulo

content

Altera o texto do subtítulo.

Tema do subtítuloxattr-themeSeleciona o tema (cor) do subtítulo no item.

Tema do título

xattr-theme

Define o tema do título.

IdentificadoridAtributo 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

Ao clicar no item, a URL inserida no campo da propriedade é aberta.

Exibir

ng-show

Propriedade AngularJS usada para mostrar ou ocultar o componente.

Posição da imagemxattr-image-positionDefine 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çacronapp-securityPropriedade 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 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 no projeto mobile.


Figura 2.1 - Selecionando imagem presente no 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


Nesta página


Compatibilidade

  • Formulário mobile

Equivalente web

Não possui.


Botão do componente


Imagem no editor visual



  • Sem rótulos