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 um Componente visual 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 Figura 1.1 - Exemplo de imagem 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 |
|---|---|---|
crn-datasource | Seleciona |
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 |
Origem
src
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 |
Tema do subtítulo
xattr-theme
Define o tema de alguns conteúdos internos, como o texto.
Tema do título
xattr-theme
Define o tema de alguns conteúdos internos, como o texto.
Identificador
id
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 |
Parâmetros de tela
screen-params
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 |
Abre a janela de seleção dos grupos com permissões para visualização ou edição.
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. | ||
| Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Configuração
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 avatar e, em propriedades, selecione para fazer o vínculo (Figura 2.1) dessa fonte com o componente.
| 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. |
Âncora Fonte de dados Fonte de dados
Fonte de dados
Após arrastar para a área de edição e configurar o Componente visual fonte de dados, selecione-o no campo Fonte de dados.
Figura 2 - Vincular Fonte 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).
Figura 2.2 - Víncular dados ao componente
Alterar tema do título e subtítulo
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).
Âncora Título Título
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.
Âncora Itens Itens
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, umItem 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 itensFigura 2.4 - Elementos estilizados especificamente
Nome em inglês
Avatar List
Nessa Nesta 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
