Rodapé com ícone
O componente visual Rodapé com ícone é uma sequência de botões que ficam na parte inferior da tela da aplicação. Cada item pode ser configurado individualmente, permitindo selecionar uma ação.
Figura 1 - Exemplo do componente rodando no aplicativo
Ao arrastar o componente Rodapé com ícone para a view, o mesmo será inserido no fim da página, independente do local onde o usuário o soltou após arrastá-lo. Caso a página já contenha um componente Rodapé com ícone, um pop-up de notificação será exibido, informando que o componente já existe e perguntando se o usuário deseja substituí-lo.
O mesmo comportamento se aplica caso o usuário inclua um componente Rodapé em uma página que contenha um componente Rodapé com ícone.
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades ao selecionar o componente.
Ao selecionar a opção Padrão do tema nas propriedades de cor e tema, o componente irá usar as cores definidas como padrão para o projeto.
Nome | Propriedade | Função |
|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
xattr-theme | Altera a cor do plano de fundo do componente. | |
tabs-color | Altera a cor dos ícones do componente. | |
Tamanho dos ícones | tabs-size | Define o tamanhos dos ícones, possui 4 opções: Pequeno, Médio, Grande e Super Grande. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Cronapp MVC usada para mostrar ou oculta 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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir itens no rodapé. |
Propriedades do item
Na tabela abaixo estão descritas as principais propriedades ao selecionar o item aba. Ele é mostrando quando a aba é selecionada (Figura 3).
Nome | Propriedade | Função |
|---|---|---|
Ícone | class | Altera o ícone do componente. |
Título | content | Altera a descrição 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. |
href | Campo onde é informado a url que será linkada. Clique no botão “…” pra selecionar uma página do projeto, | |
Valor alternativo | Title | Valor alternativo do componente. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Cronapp MVC usada para mostrar ou oculta 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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Rodapé com ícone.
Nome em português | Nome em inglês | Descrição |
|---|---|---|
Plano de fundo | Background | Estiliza o plano de fundo do componente. |
Ícones | Icons | Estiliza o ícone do componente. |
Cor
As propriedades Cor do plano de fundo e Cor dos ícones 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).
Referência
Para selecionar o formulário que será aberto, clique no botão “…” (1 da figura 2) do campo Referência de um item do rodapé e selecione o formulário na janela aberta (2).
Figura 2 - Adicionando link à aba selecionada
Aba ativo
Ao abrir a tela que possui o componente Rodapé com ícone, uma das abas estará ativa, sinalizando para o usuário que aquela aba representa a tela em exibição. Para configurar isso, basta selecionar a aba desejada na propriedade Itens. Abaixo podemos ver o ícone ativo na view home (1 da figura 3) e na view user (2 da figura 3).
Figura 3 - Selecionando o ícone ativo do formulário.
Projeto em execução
Ao executarmos o projeto, na página home estará ativa a aba Home.
Figura 3.1 - Ícone Home
Já na página user, estará ativa a aba User.
Figura 3.2 - Ícone User
Nome em inglês
Footer with icon
Nesta página
- 1 Principais propriedades
- 1.1 Propriedades do item
- 1.2 Aba de Estilos
- 1.3 Cor
- 1.4 Referência
- 1.5 Aba ativo
Compatibilidade
Formulário mobile
Equivalente web
Não possui.
Botão do Componente
Imagem no Editor Visual