Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Lista com avatar são componentes Item com avatar vinculado a uma Fonte um Componente visual fonte de dados, dessa dessa forma, é possível associar os subcomponentes imagem, título e subtítulo aos registros da fonte de dados, gerando uma lista.
Image Modified
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 | |||
---|---|---|---|---|---|
crn-datasource | Seleciona uma das Fontes 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 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. | |||
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.
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 Após arrastar para a área de edição e configurar a o Componente visual fonte de dados, selecione-a o no campo Fonte de dados.
Image Added
Figura 2 .1 - Vincular Fonte Vincular Fonte de dados existente no formulário ao componente
Âncora Título Título
Título, Subtítulo e
OrigemAvatar
As propriedades Título, Subtítulo e Origem Avatar, podem estar associadas a um campo da fonte 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 fonte de dados que deseja exibir.
Após a confirmação do campo da fonte de dados, será exibido a expressão {{rowData.<campo>}}
expressão "rowData in datasource.data", informando que a propriedade já está associada a fonte de dados.
Image Added
Figura 2. 2 - Vincular os campos da Fonte de dados a um campo da lista
No caso da propriedade Origem 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 OrigemAvatar, acesse a documentação do componente Imagemo tópico Origem da documentação Item com avatar.
Âncora Itens Itens
Itens
A propriedade Itens permite adicionar 1 ou mais componentes item 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 Removed
Image Added
Figura 2. 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 2. 3). Clique sobre o novo Item (destaque 1 da figura 2. 3) para 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 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 Removed
Image Added
Figura 23.4 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 Removed
Image Added
Figura 2.5 4 - Lista com avatar com novo registro na propriedade itens
Nome em inglês
Avatar List
Nessa Nesta página
Índice | ||||
---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added