Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
O componente visual Abas é uma sequência de botões que ficam na parte inferior da tela da aplicação. Cada aba pode ser configurada individualmente, permitindo selecionar uma ação, o ícone (quando ativado ou desativado) e label badge, que sinaliza um valor para o usuário.
Aviso | ||
---|---|---|
| ||
Esse componente foi depreciado, recomendamos substituí-lo pelo novo componente Abas (mobile). |
Image AddedImage Removed
Figura 1 - Exemplo do componente rodando no aplicativo
Principais propriedades
Nome | Propriedade | Função | Exibir | ng-show | Propriedade AngularJS usada para mostrar ou oculta o componente.|
---|---|---|---|---|---|
Identificador | id | AtributoAtributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | |||
Tema do plano de fundo | xattr-theme | Estiliza o tema do plano de fundo. | |||
Estilo | style | Altera o estilo geral do componente da forma inline. | |||
Exibir | ng-show | Propriedade Angular usada para mostrar ou ocultar 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. | xattr-theme | ||
Classes CSS | class | Adiciona classes CSS que já foram criadas. | Altera o tema (cor) do preenchimento do componente.*|||
- | Permite adicionar, ordenar, configurar e excluir abas . | Classes CSS | class | Adiciona classes CSS que já foram criadas. |
* Os temas exibidos são padrões do do Ionic framework.
Propriedades Item da aba
Clique em um dos elementos da propriedade Itens para acessar as Veja abaixo mais propriedades da aba selecionada.
Nome | Propriedade | Função | ||
---|---|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para cada aba do componente. Por padrão um id é gerado automaticamente e atribuído à aba. | ||
Referência | href | Cria um link na aba quando desativa. Clique no botão “…” pra selecionar uma tela do projeto. | ||
Ícone ativo | icon-on | Ícone que será exibido quando a aba estiver selecionada. | ||
Ícone inativo | icon-off | Ícone que será exibido quando a aba não estiver selecionada. | ||
Título | title | Altera título do componente. | Identificador||
Badge | id | Atributo que especifica um ID exclusivo para cada aba do componente. Por padrão um id é gerado automaticamente e atribuído à ababadge | Permite definir um valor inicial para o badge da aba. | |
Classes CSS | class | Adiciona classes CSS que já foram criadas. | ||
Conteúdo | content | Altera o conteúdo do componente. | ||
Estilo | style | Altera o estilo do componente da forma inline. | ||
Exibir | ng-show | Propriedade Angular 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 da aba. | badge | badge | Permite definir um valor inicial para o badge da aba
Aba de Estilos
O componente não possui propriedades específicas na aba estilo.
Âncora prop-temas prop-temas
Temas
A propriedade tema permite personalizar e padronizar cada componente em um total de 9 cores distintas. Os temas na figura 2 .1 são respectivamente: Assertive, Balanced, Energized, Light, Stable, Calm, Positive, Royal e Dark.
Image Modified
Figura 2 .1 - Temas disponíveis
Informações |
---|
O tema tema default varia varia conforme o tema do projeto. |
Âncora prop-itens prop-itens
Itens
A propriedade Itens permite adicionar uma ou mais abas ao componente visual Abas (botão Adicionar), acessar as configurações de cada aba ao clicar sobre o item (destaque 1 da Figura 2.21) e ao clicar e arrastar o item é possível alternar a ordem de exibição dos elementos das abas (2 da Figura 2.21). Image Removed
Image Added
Figura 2.2 1 - A propriedade Itens permite acessar as configurações de cada aba
Âncora prop-referencia prop-referencia
Referência
Para selecionar o formulário que será aberto, clique no botão botão “…” do campo Referência de um item da aba e selecione o formulário na janela que abrir (Figura 2.32).
Image RemovedImage Added
Figura 2.3 2 - Adicionando link à aba selecionada
Âncora prop-icon prop-icon
Ícone Ativo e Inativo
Clique sobre o campo da propriedade Ícone Ativo ou Ícone Inativo para definir como será o ícone da aba quando selecionada ou não. Uma sugestão é utilizar ícones que possuam versões outline, deixando a opção normal quando ativo e outline como inativo.
Image Modified
Figura 2.4 3 - Campos que definem os ícones quando a aba está selecionada ou não
Âncora prop-badge prop-badge
Badge
Utilize a propriedade badge para definir o valor inicial da aba. O Valor 0 (zero) não é exibido.
Para alterar esse valor em tempo de execução, é necessário utilizar um bloco de programação e realizar os seguintes passos:
- Acessar as configurações do bloco de programação (destaque 1 da figura 2.4
- 3) e selecionar o formulário que possui o componente Abas.
- Utilizar o bloco de programação Definir valor do atributo, passando: ID da aba, o atributo "badge" e o novo valor a ser exibido.
Figura 2.5 3 - Atualizando uma das abas componente visual Abas
Nome em inglês
tab
Nesta Nessa página
Índice maxLevel 3 printable false
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added