Função
O componente visual Abas é uma sequência de botões que ficam na parte inferior da tela da aplicação. Cada aba pode ser configurada individualmente, permitindo selecionar uma ação, o ícone (quando ativado ou desativado) e label badge, que sinaliza um valor para o usuário.
Figura 1 - Exemplo do componente rodando no App
Principais propriedades
Nome | Propriedade | Função |
|---|---|---|
| Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao 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. |
xattr-theme | Altera o tema (cor) do preenchimento do componente.* | |
| Itens | - | Permite adicionar, ordenar, configurar e excluir abas. |
* Os temas exibidos são padrões do Ionic framework.
Propriedades da aba
Clique em um dos elementos da propriedade Itens para acessar as propriedades da aba selecionada.
Nome | Propriedade | Função |
|---|---|---|
| Referência | href | Cria um link na aba quando desativa. Clique no botão “…” pra selecionar uma tela do projeto, |
| Ícone ativo | icon-on | Ícone que será exibido quando a aba estiver selecionada. |
| Ícone inativo | icon-off | Ícone que será exibido quando a aba não estiver selecionada. |
Identificador | id | Atributo que especifica um ID exclusivo para cada aba do componente. Por padrão um id é gerado automaticamente e atribuído à aba. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição da aba. |
| badge | badge | Permite definir um valor inicial para o badge da aba. |
Temas
A propriedade tema permite personalizar e padronizar cada componentes em um total de 9 cores distintas. Os temas na figura 2.1 são respectivamente: Assertive, Balanced, Energized, Light, Stable, Calm, Positive, Royal e Dark.
Figura 2.1 - Temas disponíveis
O tema default varia conforme o tema do projeto.
Itens
A propriedade Itens permite adicionar uma ou mais abas ao componente visual Abas (botão Adicionar), acessar as configurações de cada aba ao clicar sobre o item (destaque 1 da Figura 2.2) e ao clicar e arrastar o item é possível alternar a ordem de exibição dos elementos das abas (2 da Figura 2.2).
Figura 2.2 - A propriedade Itens permite acessar as configurações de cada aba
Referência
Para selecionar o formulário que será aberto, clique no botão “…” do campo Referência e selecione o formulário na janela que abrir (Figura 2.3).
Figura 2.3 - Adicionando link à aba selecionada
Ícone Ativo e Inativo
Clique sobre o campo da propriedade Ícone Ativo ou Ícone Inativo para definir como será o ícone da aba quando selecionada ou não. Uma sugestão é utilizar ícones que possuam versões outline, deixando a opção normal quando ativo e outline como inativo.
Figura 2.4 - Campos que definem os ícones quando a aba está selecionada ou não
Badge
Utilize a propriedade badge para definir o valor inicial da aba. O Valor 0 (zero) não é exibido.
Para alterar esse valor em tempo de execução, é necessário utilizar um bloco de programação e realizar os seguintes passos:
- Acessar as configurações do bloco de programação (destaque 1 da figura 2.4) e selecionar o formulário que possui o componente Abas.
- Utilizar o bloco de programação Definir valor do atributo, passando: ID da aba, o atributo "badge" e o novo valor a ser exibido.
Figura 2.5 - Atualizando uma das abas componente visual Abas
Nessa página
Compatibilidade
Formulário mobile
Equivalente web
Abas (web)
Botão do Componente
Imagem no Editor Visual