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

Image RemovedImage Added

Gif 1 Animação 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 abasao 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 da área do item aba. Ele é mostrando quando do contêiner que representa a aba é selecionada (Figura 1.1(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.

Image Added

Figura 1 - Propriedades de customização

Itens

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

Image RemovedImage AddedFigura 1 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 12.1).

Image RemovedImage Added

Figura 12.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 23) ou em Itens (2) e desbloqueie a área da aba utilizando o botão cadeado desagrupar componente (3).

Image RemovedImage AddedFigura 2 3 - Desbloqueando área da aba selecionada

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

Image RemovedImage Added

Figura 23.1 - Arrastando componente para área desbloqueada da aba

Renomeando aba

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

Image RemovedImage AddedFigura 23.2 - Renomeando aba do componente

Propriedades de customização

componente

Image Removed

Figura 3 - Propriedades de customização