Função
Esse componente é usado para renderizar os dados de uma coluna da tabela. O lista com avatar, além de poder renderizar dados contidos em duas colunas da tabela - utilizando os campos título e subtítulo, também é possível associar um avatar, que não é proveniente da tabela, mas de uma url ou de uma imagem existente na IDE, a esses dados.
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.
Figura 1.1 - Exemplo de imagem da Lista com Avatar rodando no Aplicativo
Principais propriedades
Na tabela abaixo estão descritos descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
|---|---|---|
Fonte de dados | crn-datasource | Seleciona uma das fonte 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 oculta 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. |
Configuração
Vincular fonte de dados ao componente
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 tela e configurar a fonte de dados, selecione-a no campo Fonte de dados.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 avatar e, em propriedades, selecione para fazer o vínculo (Figura 2.1) dessa fonte com o componente.
Figura 2.1 - Víncular fonte Vincular Fonte de dados existente no formulário ao componente
Vincular dados da fonte 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.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).
Figura 2.2 - Víncular dados ao componente
Alterar tema do título e subtítulo
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.Para alterar o tema do conteúdo tanto do título quanto do subtí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)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). 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.4 - Elementos estilizados especificamente5 - 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 / mobile
Não possuiO link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual