O componente abas é baseado em navegação e provê uma maneira fácil e poderosa de suportar grandes conteúdo 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.

Animação 1 - Exemplo do componente rodando no aplicativo 

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades ao selecionar o componente.

Propriedades item da aba

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

Propriedades contêiner da aba

Na tabela abaixo estão descritas as principais propriedades do contêiner que representa a aba (figura 3).

Aba de Estilos

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

Modelo das abas

Altera levemente o modelo da aba, modificando principalmente a borda. Caso o modelo seja alterado, as propriedades de customização também serão alteradas.

• Clássico: possui todas as propriedades de customização e as laterais do modelo são redondas;
• Moderno: não possui apenas a propriedade Largura das abas, as pontas são redondas;
• Light: não possui as propriedades Cor da aba ativa e Largura das abas, também não é possível customizar o item ativo e suas bordas são quadradas.

Figura 1 - Propriedades de customização

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 clicando diretamente no contêiner da aba (1 da Figura 3) ou em Itens (2) e desbloqueie a área da aba utilizando o botão cadeado desagrupar componente (3).

Figura 3 - Desbloqueando área da aba selecionada

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

Figura 3.1 - Arrastando componente para área desbloqueada da aba

Renomeando aba

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

Figura 3.2 - Renomeando aba do componente