Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O Item com avatar é um componente Item com da lista Simples que possui três subcomponentes: imagem, texto <h2> para o título e texto <h3> para o subtítulo. Item com avatar se diferencia da Lista com avatar por não precisar estar associada a uma fonte de dados, podendo ser alimentada manualmente.
Além do componente Item com avatar, o Cronapp também possui o Item com imagem, sendo que o primeiro a imagem recebe um contorno arredondado e o segundo, quadrado.
Image RemovedImage Added
Figura 1 - Item com os componentes Imagem e botão Exemplo do componente rodando no simulador
Principais propriedades
Na tabela abaixo estão descritos descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Origem | src | Campo para informar o endereço da imagem, podendo ser local ou uma URL externa. |
Título | content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o título do componente. |
Subtítulo | content | Esse campo define o texto que é exibido ao usuário. Nesse caso, ele define o subtítulo do componente. |
Cor do subtítulo | xattr-theme | Seleciona a cor do subtítulo no item. |
xattr-theme | Seleciona a cor do título no item. | |
Identificador | id |
Atributo que especifica um ID |
exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente, mas |
pode ser alterado. |
Estilo |
style | Altera o |
estilo geral do componente da forma inline. |
Exibir |
content
Altera o texto do subtítulo.
Origem
src
Endereço da imagem, podendo ser local ou uma url externa.
ng-show | Propriedade Angular usada para mostrar ou ocultar o componente. | |
Posição da imagem | xattr-image-position | Define a posição da imagem no item, podendo ser na esquerda ou na direita. |
xattr-text-position | Define a posição do título e subtítulo |
Posição
xattr-position
Define a posição do avatar e títulos:
Esquerda: avatar e depois títulos;
Direita: títulos e depois avatar.
Tema do Título
xattr-theme
Define o tema do título.
Tema do Subtítulo
xattr-theme
Define o tema do subtítulo.
Referência
href
do item, podendo ser na esquerda, no centro ou na direita. | ||
Referência | href | Abre a URL inserida no campo da propriedade ao clicar no item. |
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. |
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. |
Avatar | Avatar | Estiliza a avatar do componente. |
Título | Title | Estiliza o título do componente. |
Subtítulo | Subtitle | Estiliza o subtítulo do componente. |
Âncora origem origem
Origem
A propriedade Origem alimenta o componente Imagem dentro do Item com Avatar, permitindo exibir imagens presentes no projeto ou externas, através de URL. Ao clicar no menu "...", uma janela abrirá listando todas as imagens presentes no projeto mobile (Figura 2).
Image Added
Figura 2 - Selecionando imagem presente no projeto
Outra forma é informar na propriedade Origem a URL de uma imagem (Figura 3).
Image Added
Figura 3 - Adicionando URL no campo origem
Âncora cor cor
Cor
As propriedades Cor do Título e Cor do Subtítulo (Figura 3.1) exibirão 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
Image Added
Figura 3.1 - Cor do Título (Assertivo) e Cor do Subtítulo (Positivo)
Âncora posicao posicao
Posição
As propriedades Posição da Imagem e Posição do texto permitem mudar a posição do conteúdo existente no componente de acordo com o que foi selecionado nos botões (Figura 3.2).
Image Added
Figura 3.2 - Posição do Texto (Direita) e Posição da Imagem (Direita)
Nome em inglês
Avatar Item
NessaNesta 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 RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added