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.

Aba de Estilos

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

Tema

Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.

As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:

1. Alteração do tema do projeto (menor prioridade);
2. Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).

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