O Item com ícone é um componente Item 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.
Figura 1 - Exemplo do componente item com ícone rodando no Simulador
Principais propriedades
Na tabela abaixo estão descritos as principais propriedades para o funcionamento básico do componente.
Nome
Propriedade
Função
Ícone
class
Abre a janela de seleção de ícones.
Conteúdo
content
Campo define o texto que será exibido.
Tamanho do ícone
xattr-icon-size
Define o tamanho do ícone em porcentagem.
Tema do conteúdo
xattr-theme
Define o tema do texto.
Tema do ícone
xattr-theme
Define o tema do ícone.
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.
Posição do texto
xattr-text-position
Define a posição do texto: esquerda, centro ou direita.
Posição do Ícone
xattr-icon-position
Define a posição do ícone: esquerda ou direita.
Referência
href
Abre a URL inserida no campo da propriedade ao clicar no item.
Exibir
ng-show
Propriedade AngularJS usada para mostrar ou oculta o componente.
Fonte de Dados
crn-datasource
Seleciona uma fonte de dados que estiver presente no formulário html.
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ç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.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Ícones
Ao clicar no campo da propriedade Ícone, uma janela de seleção de ícones é aberta (Figura 2.1) e basta somente selecionar o ícone desejado para inserir no item (aceitando somente um ícone para o item).
Figura 2.1 - Janela de ícones
Tema
A propriedade tema, tanto para ícone quanto para o texto, permite personalizar e padronizar em 9 cores distintas: assertive (vermelho), balanced (verde), energized (amarelo), light (branco), stable (cinza claro), calm (azul claro), positive (azul royal), royal (liláis) e dark (cinza escuro).
Figura 2.2 - Tema do conteúdo (Royal) e tema do ícone (Positive)