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 |
|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Segurança | cronapp-security | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
| Itens | - | Permite adicionar, ordenar, configurar e excluir abas. |
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. |
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 e selecione o formulário na janela que abrir (Figura 2.1).
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. Um 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 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.4 - 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