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 |
|---|
Descrição | content | Altera o texto do Parágrafo. |
| Imagem do avatar | src | Campo para informar o endereço da imagem, podendo ser local ou uma url externa. |
| Título | content | Altera o texto 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, mas pode ser alterado. |
| Estilo | style | Altera o estilo do componente da forma inline. |
Exibir | ng-show | Propriedade |
Angular usada para exibir ou ocultar o componente. | ||
| 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. |
| 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 Cartão.
| Nome em português | Nome em inglês | Descrição |
|---|---|---|
Plano de fundo | Background | Estiliza plano de fundo do componente. |
Título | Title | Estiliza o título do componente. |
Descrição | Description | Estiliza a descrição do componente. |
Conteúdo, Título e
OrigemImagem do avatar
As propriedades Conteúdo Descrição, Título e Origem Imagem do avatar 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 expressão {{rowDataUser.active.<campo>name}}, informando que a propriedade já está associada a fonte de dados do exemplo abaixo (Figura 2).
Figura 2 - Vincular os campos da Fonte de dados a um Cartão
No caso da propriedade OrigemImagem do avatar, é 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 OrigemImagem do avatar, 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
