Função
O Cartão é um componente que possui três subcomponentes: imagem, texto <h2> para o título e parágrafo para o conteúdo.
Na figura abaixo vemos o componente Cartão, que vem ganhando muita popularidade entre aplicativos Mobile por possibilitar interfaces mais limpas e arrumadas, além de organizar o conteúdo com subcomponentes de forma que fique mais fácil para o usuário consumir informações.
Figura 1 - Exemplo do componente rodando no simulador
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente cartão e seus subcomponentes.
Nome | Propriedade | Função |
|---|---|---|
Conteúdo | content | Altera o texto do Parágrafo. |
| Título | content | Altera o texto do Título. |
| Origem | src | Campo para informar o endereço da imagem, podendo ser local ou uma url externa. |
| 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. |
Exibir | ng-show | Propriedade AngularJS usada para exibir ou ocultar o componente. |
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. |
Conteúdo, Título e Origem
As propriedades Conteúdo, Título e Origem 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 para abrir a janela de seleção e na aba Campo de Tela, selecione o campo da Fonte de dados.
Após a confirmação do campo da fonte de dados, será exibido a expressão {{rowData.<campo>}}, informando que a propriedade já está associada a fonte de dados.
Figura 2 - Vincular os campos da Fonte de dados a um Cartão
No caso da propriedade Origem, é necessário acessar o ícone Editar Expressão para abrir a janela de seleção e fazer o mesmo procedimento. Ela também permite 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.
Para mais informações sobre o campo Origem, acesse a documentação do componente Imagem.
Nome em inglês
Card
Nessa página
| Índice | ||||
|---|---|---|---|---|
|
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual