Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

O Item item com ícone é um componente Item da lista Simples com dois subcomponentes: ícone e texto <h2> para o título. Item com ícone se diferencia da Lista com ícone por não precisar estar associada a uma fonte de dados, podendo ser alimentada manualmente.

Image Removed


Image Added

Figura 1 - Exemplo do componente Item com os componentes Imagem e botãoícone rodando no Simulador

Principais propriedades

Na tabela abaixo estão descritos descritas as principais propriedades (Figura 2) para o funcionamento básico do componente.

Conteúdo

Nome

Propriedade

Função

Identificador

id

Gera um ID automaticamente para o componente, mas que pode ser alterado.

Ícone
classAbre a janela de seleção de ícones.
Ícone

Título

content

Altera o texto do subtítulo

Campo define o texto que será exibido.

Cor do conteúdo

xattr-theme

Define a cor do conteúdo que será exibido.

Cor do íconexattr-themeDefine a cor do ícone que será exibido.

Tamanho do ícone

xattr-icon-size

Define o tamanho do ícone em porcentagem.

IdentificadoridAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente, mas pode ser alterado.
Posição do Íconexattr-icon-positionDefine a posição do ícone
e texto
:

Esquerda: ícone e depois texto;
Direita: texto e depois ícone.

Tema do conteúdo

xattr-theme

Define o tema do texto.

Tema do ícone

xattr-theme

Define o tema do ícone.

Referência

href

Abre uma URL ao clicar no item.

esquerda ou direita.

Posição do texto

xattr-text-position

Define a posição do texto: esquerda, centro ou direita.

Referência

href

Abre a URL inserida no campo da propriedade ao clicar no item.

EstilostyleAltera o estilo geral do componente da forma inline.

Exibir

ng-show

Propriedade Angular usada para mostrar ou oculta o componente.

Repetir

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.

Segurançacronapp-securityPropriedade 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.
Skincrn-skinPermite 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 Item com ícone.

Nome em portuguêsNome em inglêsDescrição
Plano de fundo

Background

Estiliza o plano de fundo do componente.
ÍconeIconEstiliza o ícone do componente.

Título

Title

Estiliza o título do componente.


Âncora
icone
icone

Ícones

Ao clicar no campo da propriedade Ícone, uma janela de seleção de ícones é aberta (Figura 2) e basta somente selecionar o ícone desejado para inserir no item.


Image Added

Figura 2 - Janela de ícones

Âncora
cor
cor

Cor

As propriedades Cor do conteúdo e Cor do ícone (Figura 3) 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:

  1. Alteração do tema do projeto (menor prioridade);
  2. Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
  3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).


Image Added

Figura 3 - Cor do conteúdo (Real) e cor do ícone (Positivo)

Nome em inglês

Item Icon

Nessa

Nesta página

Índice
maxLevel3
printablefalse

Compatibilidade

  • Formulário mobile


Equivalente web / mobileweb 

Não possuiO link será adicionado no final, após todos os componentes criados.


Botão do Componente

Image Removed

Image Added


Imagem no Editor Visual

Image Removed

Image Added