Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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.
![](https://docs.cronapp.io/download/attachments/33619971/ComponenteGrade.png?version=1&modificationDate=1544838402000&api=v2)
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.
Image Added
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 uma das um dos Componente visual fonte 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 texto título do títulocomponente. | ||||
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 | 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. | |||
Estilo | style | Altera o estilo geral do componente da forma inline. | |||
Exibir | ng-show | Propriedade AngularJS usada Angular utilizada para exibir ou oculta o componentemostrar 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. | |||
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. | |||
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.
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.
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.
Image Added
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.
Image Added
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.
Image Added
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
Image Added
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.
Image Added
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
Image Added
Imagem no Editor Visual
Image Added