Função

O componente abas é baseado em navegação que prover 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.

Figura 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).

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 estão descritos os tipos de estilos disponíveis para o componente Abas.

Itens

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

Figura 2 - 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 2.1).

Figura 2.1 - Reordenando as abas no componente

Configuração

Adicionar componentes a aba selecionada

Para adicionar os componentes na aba, selecione-a (1 da Figura 3.1) e desbloqueie a área utilizando o botão desagrupar componente (2 da Figura 3.1).

Figura 3.1 - Desbloqueando área da aba selecionada

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

Figura 3.2 - Arrastando componente para área desbloqueada da aba

Renomeando aba

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

Figura 3.3 - Renomeando aba do componente