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

Aba de Propriedades

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

Ao selecionar a opção Padrão do tema nas propriedades de cor, o componente irá usar as cores definidas como padrão para o projeto.

Nome	Propriedade	Função

Nome	Propriedade	Função
Modelo das abas	theme-ion-segment	Altera o modelo entre Clássico, Moderno e Light.
Cor do fundo	background-color	Altera a cor do fundo da aba.
Cor do texto e ícone	icon-theme	Altera a cor do texto e do ícone presente na aba.
Cor da aba ativa	background-color-active	Altera a cor da aba que está ativa.
Tamanho do ícone	icon-size	Altera o tamanho do ícone.
Orientação do ícone	icon-orientation	Altera a posição do ícone em referência ao texto da aba.
Largura das abas	tabs-template	Altera a largura das abas. Compacto: mantém uma margem entre a borda da tela e o componente; Completo: o componente preenche todo o espaço.
Identificador	id	Atributo que especifica um ID exclusivo para o componente. Por padrão, o ID é gerado automaticamente e atribuído ao componente.
Estilo	style	Altera o estilo geral do componente.
Exibir	ng-show	Propriedade Cronapp MVC usada para mostrar ou oculta o componente.
Repetir	crn-repeat	Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança	cronapp-security	Abre a janela de seleção dos grupos com permissões para visualização ou edição.
Skin	crn-skin	Permite selecionar um skin que afetará apenas o componente selecionado.
Classes CSS	class	Adiciona classes CSS que já foram criadas.
Itens	-	Permite adicionar ou excluir abas, ou selecionar uma das abas e acessar suas propriedades.

Aba de Eventos

O componente não possui eventos configurados.

Aba de Estilos

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

Nome em português	Nome em inglês	Descrição

Nome em português	Nome em inglês	Descrição
Cor do fundo	Background	Estiliza o fundo do componente.
Texto e ícone	Text and icon	Estiliza o texto e o ícone do componente.
Aba Ativa	Active Tab	Estiliza a aba ativa do componente.
Ícone	Icon	Estiliza somente o ícone do 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).

Nome	Propriedade	Função

Nome	Propriedade	Função
Ícone	class	Altera o ícone da aba.
Título	content	Define o rótulo do item e é possível internacionalizá-lo.
Identificador	id	Atributo que especifica um ID exclusivo para o componente. Por padrão, o ID é gerado automaticamente e atribuído ao componente.
Alvo de dados	data-target	Define o valor de referência do alvo.
Dado ao trocar	data-toggle	Atributo de dados do HTML5 que liga automaticamente o elemento ao tipo correspondente.
Estilo	style	Altera o estilo da aba do componente.
Exibir	ng-show	Propriedade Cronapp MVC usada para mostrar ou oculta o componente.
Regra	role	Atributo do HTML5 que dá ênfase a semântica do elemento para oferecer mais acessibilidade.
Repetir	crn-repeat	Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança	cronapp-security	Abre a janela de seleção dos grupos com permissões para visualização ou edição.
Skin	crn-skin	Permite selecionar um skin que afetará apenas o componente selecionado.
Classes CSS	class	Adiciona classes CSS que já foram criadas.

Propriedades contêiner da aba

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

Nome	Propriedade	Função

Nome	Propriedade	Função
Identificador	id	Atributo que especifica um ID exclusivo para o componente. Por padrão, o ID é gerado automaticamente e atribuído ao componente.
Estilo	style	Altera o estilo do conteúdo dentro da aba selecionada.
Exibir	ng-show	Propriedade Cronapp MVC usada para mostrar ou oculta o componente.
Repetir	crn-repeat	Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança	cronapp-security	Abre a janela de seleção dos grupos com permissões para visualização ou edição.

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

Adicionar: adiciona uma nova aba ao componente;
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

Nome em inglês

tabs

Nesta página

1 Principais propriedades
- 1.1 Propriedades item da aba
- 1.2 Propriedades contêiner da aba
- 1.3 Modelo das abas
- 1.4 Itens
  - 1.4.1 Reordenar as abas
2 Configuração
- 2.1 Adicionar componentes a aba selecionada
- 2.2 Renomeando aba

Compatibilidade

Formulário mobile

Equivalente web

Abas (web)

Botão do Componente

Imagem no Editor Visual

Abas (mobile)