Função
Esse componente é usado para renderizar os dados de uma fonte de dados juntamente com uma imagem fixa, podendo ser de uma url ou de uma imagem presente na IDE (Figura 1)Lista com thumbnail são componentes Item com thumbnail vinculado a uma Fonte de dados, Dessa forma, é possível associar os subcomponentes imagem, título e subtítulo aos registros da fonte de dados.
Figura 1 - Exemplo do componente rodando no simulador
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função | ||
|---|---|---|---|---|
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que estiver presente no formulário html. | ||
Origem | src | Campo para informar o endereço da imagem, podendo ser local ou uma url externa. | ||
Título | content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o título do componente. | ||
Subtítulo | content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o subtítulo do componente. | ||
Repetidor | ng-repeat | Propriedade AngularJS que determina que todos os dados da coluna sejam renderizadosque seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. | ||
Posição da imagem | xattr-position | Define a posição do avatar da imagem através dos botões de seleção, podendo ser esquerda ou direita. | ||
Posição do texto | xattr-text-position | Define a posição do conteúdo (título e subtítulo) através dos botões de seleção, podendo ser esquerda, centro ou direita. | ||
Tema do título | xattr-theme | Define o tema de alguns conteúdos internos, como o textodo título. | ||
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | ||
Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta ocultar o componente. | Parâmetros de tela | screen-params |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. | ||
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Para mais detalhes sobre propriedades não descritas abaixo, acesse a documentação do componente Item com thumbnail.
Vincular fonte de dados ao componente
O funcionamento básico do componente é através do vínculo de uma fonte de dados com o componente. Assim, insera e configure a fonte de dados na área de design, e após, adicione a lista com thumbnail e, em propriedades, selecione para fazer o vínculo (Figura 2.1) dessa fonte com o componente.
Figura 2.1 - Víncular fonte de dados existente no formulário ao componente
Vincular dados da fonte ao componente
Para vincular os dados da fonte ao componente, clique em … (1) ao lado do campo subtítulo para abrir a janela de configuração do conteúdo. Assim, selecione a aba campo de tela (2) e escolha qual das colunas dessa fonte (3) mostrará os dados no componente (Figura 2.2).Título, Subtítulo e Origem
As propriedades Título, Subtítulo e Origem podem estar associadas a um campo da fonte de dados ou ser um conteúdo estático. Para vincular a um campo da fonte de dados, clique no botão "..." da propriedade para abrir a janela de seleção e na aba Campo de Tela, selecione o campo da Fonte de dados.
Após a confirmação do campo da fonte de dados, será exibido a expressão {{rowData.<campo>}}, informando que a propriedade já está associada a fonte de dados.
Figura 2.2 - Víncular dados ao componente
Alterar tema do título
Para alterar o tema do título, clique no campo para mostrar as opções existentes (Figura 2.3).
Figura 2.3 - Alterar tema dos textos do componente
No entanto, essa não é a única forma. Na aba estilos (1), alguns elementos serão mostrados para que sejam estilizados, bastando clicar no menu … (2) para abrir a aba de configuração de CSS específica (Figura 2.4).
Figura 2.4 - Elementos estilizados especificamente
Adicionar imagem
As imagens que serão renderizadas nos itens podem ser provenientes de uma url ou , de uma imagem dentro do Cronapp ou do banco. Essa imagem será renderizada para todos os itens presentes na fonte de dados.
Adicionando imagem pela url
Basta somente copiar o link dessa imagem e colar no campo origem.
Figura 3.1 - Adicionando imagem de uma url
Adicionando imagem que existe no projeto
Para adicionar uma imagem que está salva na IDE, clique no menu … (1) que fica ao lado do campo origem para abrir a janela que mostra todas as imagens que existem no projeto. Então, procure pela imagem caso seja necessário (2) e selecione ela (3).
Figura 3.2 - Adicionando imagem existente no projeto
Adicionando imagem proveniente do banco
Para adicionar uma imagem que venha de um banco de dados, clique no ícone de editar expressão (Figura 3.3.1) que aparece ao sobrepor o mouse no campo origem.
Nome em inglês
List Thumbnail
Nessa página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web / mobile
Não possuiO link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual