Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 10 Atual »

Função

O Painel é um componente formado por três seções: cabeçalho (Header), conteúdo (Content) e rodapé (Footer) e cada seção possui o componente de texto Cabeçalho. Normalmente utilizado quando se deseja apresentar informações segmentadas de um mesmo conteúdo. Cada uma das divisões do Painel é editável e suas propriedades são facilmente acessadas clicando sobre a divisão desejada.


Figura 1 - Exemplo do componente rodando no browser

Propriedades do Painel

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

Nome

Propriedade

Função

Identificador

id

Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.

Temaxattr-themeAltera a tema dos ícones.
EstilostyleAltera o estilo geral do componente da forma inline.

Exibir

ng-show

Propriedade Angular usada para mostrar ou ocultar o componente.

Repetircrn-repeatPropriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurançacronapp-securityAbre a janela de seleção dos grupos com permissões para visualização ou edição.
Classes CSSclassAdiciona classes CSS já criadas.

Aba de Estilos

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

Nome em portuguêsNome em inglêsDescrição

Cabeçalho

Header

Estiliza o cabeçalho do componente.

Conteúdo

Content

Estiliza o conteúdo do componente.

Rodapé

Footer

Estiliza o rodapé do componente.

Seções e subcomponentes

Cada uma das seções do Painel possui um componente Cabeçalho, você pode editá-lo ou remove-lo para adicionar outro componente.

Para adicionar outro componente, selecione a seção que deseja inserir o conteúdo, clique no botão cadeado da barra de opções para desagrupar a seção (Figura 2) e arraste o novo componente até o contorno da seção ficar azul tracejado (Figura 2.1).



Figura 2 - Desagrupe a seção para permitir adicionar outros componentes


Figura 2.1 - Após desagrupar, arraste um componente

Exemplo de uso

Como exemplo de uso do componente Painel podemos citar a criação de cards. Nesse contexto, cada seção contém textos ou outros componentes visuais, como imagem, botões, etc.


Figura 3 - Exemplo de uso do Painel

Nome em inglês

Panel


Nesta página


Compatibilidade

  • Formulário web


Equivalente mobile

Não possui.


Botão do Componente


Imagem no Editor Visual



  • Sem rótulos