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 - 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 |
|---|---|---|
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. |
| Avatar | src | Campo para informar o endereço da imagem, podendo ser local ou uma URL externa. |
content | Define o título do componente. | |
content | Define o texto do subtítulo. | |
Tema do título | xattr-theme | Define o tema do título. |
Tema do subtítulo | xattr-theme | Define o tema do subtítulo. |
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. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
| Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular utilizada para mostrar ou ocultar componentes. |
| Repetir | crn-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. |
| 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.
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente.
Nome em português | Nome em inglês | Descrição |
|---|---|---|
| Plano de fundo | Background | Estiliza o plano de fundo do componente. |
| Título | Title | Estiliza o título do componente. |
| Subtítulo | Subtitle | Estiliza o subtítulo do componente. |
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 - Vincular Fonte de dados existente no formulário ao componente
Título, Subtítulo e Avatar
As propriedades Título, Subtítulo e Avatar, 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 Título ou Subtítulo para abrir a janela de seleção e na aba Campo de Tela, selecione o campo da fonte de dados que deseja exibir.
Após a confirmação do campo da fonte de dados, será exibido a expressão "rowData in datasource.data", informando que a propriedade já está associada a fonte de dados.
Figura 2 - Vincular os campos da Fonte de dados a um campo da lista
No caso da propriedade Avatar, é 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 Avatar, acesse o tópico Origem da documentação Item com avatar.
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 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 3). Clique sobre o novo Item (destaque 1 da figura 3) para configurá-lo.
Para reordenar os itens, clique e arraste (destaque 2 da figura 3) ou clique no ícone da lixeira para excluir o item.
Caso queira trabalhar em um item específico da lista, basta seleciona-lo (destaque 1 da figura 3), 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
Figura 3.1 - 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 4 - Lista com avatar com novo registro na propriedade itens
Nome em inglês
Avatar List
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual
