Função

O componente abas é baseado em navegação que prover e provê uma maneira fácil e poderosa de suportar grandes conteúdos dentro de uma pequena área separando por diferentes painéis. Cada aba representa um painel e cada painel pode conter diversos componentes visuais. Para alterar entre os painéis, basta clicar na sua respectiva aba, que ficará em uma cor mais escura.

Image RemovedImage Added

Figura Animação 1 - Utilização do componente aba

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente abas.

Na tabela abaixo estão descritas as principais propriedades do item aba. Ele é mostrando quando a aba é selecionada na área de edição (Figura 3.3).contêiner que representa as abas.

Na tabela abaixo estão descritas as principais propriedades da área do item aba. Ele é mostrando quando a aba é selecionada em itens (Figura 2).

Aba de Estilos

Na tabela abaixo esta descrito estão descritos os tipos de estilos disponíveis para o componente Abas.

Itens

Em itens (Figura 21.1) é possível fazer a adição, remoção, reordenação e a configuração de uma aba no componente. 

Image RemovedImage Added

Figura 2 1.1 -   Selecionar, adicionar e remover um item de abas

1. Adicionar: adiciona uma nova aba ao componente;
2. Remover: remove a aba do componente correspondente ao ícone do item.

Reordenar as abas

Para reordenar as abas, basta segurar o item e arrastá-lo para cima ou para baixo (Figura 1.2.1).

Image RemovedImage Added

Figura 1.2 .1 - Reordenando as abas no componente

Adicionar componentes a aba selecionada

Para adicionar os componentes na aba, selecione-a clicando diretamente no contêiner da aba (1 da Figura 32.1) ou em Itens (2 da Figura 2.1) e desbloqueie a área utilizando o botão desagrupe o componente, clicando sobre o ícone de cadeado, desagrupar componente (2 3 da Figura 32.1).

Image RemovedImage Added

Figura 32.1 - Desbloqueando área da aba selecionada

Após isso, selecione o componente e insira-o na área desbloqueada (Figura 32.2).

Image RemovedImage Added

Figura 32.2 - Arrastando componente para área desbloqueada da aba

Renomeando aba

Para renomear a aba, clique sobre a mesma no editor (1 da Figura 32.3) para abrir suas propriedades no menu lateral e renomeie a aba no campo altere seu nome no campo conteúdo (2 da Figura 2.3).

Image Added

Figura 2.3 - Renomeando aba do componente

Classe Active

Essa classe é responsável por dar foco a aba que ficará ativa no momento que o componente for renderizado. Durante a edição do componente (editor de view), quando selecionamos a aba para editá-la, o Cronapp inclui automaticamente a classe “Active” e retira essa classe da última aba selecionada (figura 31).

Image Removed

No exemplo da figura 3, estamos selecionando a terceira aba (New Tab), fazendo com que a classe active seja inserida nela.

Image Added

Figura 3 -  Selecionando a terceira aba

Image Added

Figura 3.1 -  Representação das abas em forma de código

A definição da classe ativa no momento ocorre de forma fixa, ou por bloco de programação. Para entender como definir a aba ativa através do bloco de programação, acesse a documentação do bloco Mudar aba.