Função
Lista com avatar são componentes Item com avatar 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, gerando uma lista.
Figura 1.1 - Exemplo da Lista com Avatar rodando no Aplicativo
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 das Fontes de dados presentes no formulário. |
Repetidor | 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. |
Título | content | Define o texto do título. |
Subtítulo | content | Define o texto do subtítulo. |
Origem | src | Campo para informar o endereço da imagem, podendo ser um endereço dentro do projeto ou uma url externa. |
Posição da imagem | xattr-position | Define a posição do avatar 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 texto, alinhando à direita, esquerda ou centro. |
Tema do subtítulo | xattr-theme | Define o tema do subtítulo. |
Tema do título | xattr-theme | Define o tema do 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 exibir ou ocultar o componente. |
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. |
| Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
Para mais detalhes sobre propriedades não descritas abaixo, acesse a documentação do componente Item com avatar.
Fonte de dados
Após arrastar para a área de edição e configurar a fonte de dados, selecione-a no campo Fonte de dados.
Figura 2.1 - Vincular Fonte de dados existente no formulário ao componente
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 - Vincular os campos da Fonte de dados a um campo da lista
No caso da propriedade Origem, é necessário acessar o ícone Editar Expressão para abrir a janela de seleção e fazer o mesmo procedimento.
Para mais informações sobre o campo Origem, acesse a documentação do componente Imagem.
Itens
A propriedade Itens permite adicionar 1 ou mais componentes item com avatar à lista com configurações distintas. Dessa forma, após cada registro da Lista com avatar, será exibido um registro do novo item.
Figura 2.3 - Adição de novo registro da propriedade Itens
Ao clicar no botão "+" (Adicionar) da propriedade Itens, um Item com avatar será inserido no componente Lista com avatar (Figura 2.3). Clique sobre o novo Item (destaque 1 da figura 2.3) para selecionar e configurar somente o novo Item (Figura 2.4). configurá-lo.
Para reordenar os itens, clique e arraste (destaque 2 da figura 2.3) ou clique no ícone da lixeira para excluir o item.
Perceba na figura abaixo que somente o novo item fica selecionado na área de edição. Para retornar as configurações da Lista com Avatar, clique fora da área selecionada na área de edição
.Para reordenar os itens, clique e arraste (destaque 2 da figura 2.3) ou clique no ícone da lixeira para excluir o item.Figura 2.4 - Selecione o novo registro na propriedade Itens para acessar suas propriedades
Após configurar um registro da propriedade Itens, o componente será visualizado como na figura abaixo.
Figura 2.5 - Lista com avatar com novo registro na propriedade itens
Nome em inglês
Avatar List
Nessa página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual