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

Gif 1 - Exemplo do componente rodando no aplicativo 

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 contêiner que representa a aba.

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

Aba de Estilos

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

Itens

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

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

Figura 1.1 - Reordenando as abas no componente

Configuração

Adicionar componentes a aba selecionada

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

Figura 2 - Desbloqueando área da aba selecionada

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

Figura 2.1 - Arrastando componente para área desbloqueada da aba

Renomeando aba

Para renomear a aba, clique sobre a mesma no editor (1 da Figura 2.2) para abrir suas propriedades no menu lateral e renomeie a aba no campo Título (2 da Figura 2.2).

Figura 2.2 - Renomeando aba do componente

Propriedades de customização

O componente possui algumas propriedades que facilitam a customização. Como mostrado na figura 3, em poucos cliques é possível estilizar de várias formas o componente.

Figura 3 - Propriedades de customização

1. Modelo das abas: Altera levemente o modelo da aba, alterando principalmente a borda, caso o modelo seja alterado, as propriedades de customização também serão alteradas.
   • Clássico: Possui todas as pripriedades de customização;
   • Moderno: Não possui apenas a propriedade Largura das abas;
   • Light: Não possui as propriedades Cor da aba ativa e Largura das abas;
2. Cor do fundo: Altera a cor do fundo da aba;
3. Cor do texto e ícone: Altera tanto o ícone quanto o texto;
4. Cor da aba ativa: Destaca na cor selecionada a aba que esta ativa;
5. Tamanho do ícone: Altera o tamanho do ícone;
6. Orientação do ícone:  Altera a posição do ícone referente ao título;
7. Largura das abas: Altera a largura das abas;
   • Compacto: Mantém uma margem da borda para a dic da página;
   • Completo: Preenche toda a página para os dois lados.