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.
Componente depreciado
Esse componente foi depreciado, recomendamos substituí-lo pelo novo componente Abas (mobile).
Figura 1 - Exemplo do componente rodando no aplicativo
Principais propriedades
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. |
| Tema do plano de fundo | xattr-theme | Estiliza o tema do plano de fundo. |
| Estilo | style | Altera o estilo geral do componente da forma inline. |
| Exibir | ng-show | Propriedade Angular usada para mostrar 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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
- | Permite adicionar, ordenar, configurar e excluir abas. |
* Os temas exibidos são padrões do Ionic framework.
Propriedades Item da aba
Veja abaixo mais propriedades da aba.
Nome | Propriedade | Função |
|---|---|---|
| Identificador | id | Atributo que especifica um ID exclusivo para cada aba do componente. Por padrão um id é gerado automaticamente e atribuído à aba. |
| 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. |
| Título | title | Altera título do componente. |
| Badge | badge | Permite definir um valor inicial para o badge da aba. |
| Classes CSS | class | Adiciona classes CSS que já foram criadas. |
| Conteúdo | content | Altera o conteúdo do componente. |
| Estilo | style | Altera o estilo do componente da forma inline. |
| Exibir | ng-show | Propriedade Angular 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 da aba. |
Aba de Estilos
O componente não possui propriedades específicas na aba estilo.
Temas
A propriedade tema permite personalizar e padronizar cada componente em um total de 9 cores distintas. Os temas na figura 2 são respectivamente: Assertive, Balanced, Energized, Light, Stable, Calm, Positive, Royal e Dark.
Figura 2 - 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.1) e ao clicar e arrastar o item é possível alternar a ordem de exibição dos elementos das abas (2 da Figura 2.1).
Figura 2.1 - 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 de um item da aba e selecione o formulário na janela que abrir (Figura 2.2).
Figura 2.2 - 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.3 - 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 3) 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 3 - Atualizando uma das abas componente visual Abas
Nome em inglês
tab
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual
