Grupo¶

O Vinyl 3.3 introduz o recurso Grupo, que fornece um contêiner para controles que você deseja agrupar visualmente em uma página. O recurso Grupo tem definições de configuração adicionais disponíveis para que você possa ajustar a aparência e a exibição dos controles no contêiner. Além das opções de configuração disponíveis no próprio controle Grupo, você pode usar Estilos para definir ainda mais a aparência.

Visão Geral dos Recursos¶

Os grupos oferecem muitas opções de configuração, dependendo da saída desejada.

Exemplo de grupo usando o tipo de layout empilhado

Os grupos suportam as seguintes opções de configuração:

• Escolha entre dois tipos de layout de orientação ao configurar grupos: lado a lado ou empilhado.
• Capacidade de usar o dimensionamento relativo para dimensionar e preencher o conteúdo para caber em todo o espaço vertical e horizontal disponível alocado em uma página.
• Opção para configurar Grupos para recolher e expandir quando o título é clicado.
• Accordion e Tab são dois tipos de controles que podem conter informações e são úteis para apresentar agrupamentos lógicos de informações.
  • Por padrão, o Vinyl apresentará o primeiro Controle como expandido (ou aberto) e o restante como recolhido (ou fechado).
  • Personalize a imagem exibida em um controle Accordion, que é usado para indicar o estado aberto/fechado. Se você não escolher um "estado desligado" para o acordeão, o Vinyl usará a imagem do estado LIGADO e girará 90 graus.
  • O estado padrão (aberto ou fechado) pode ser definido para controles de acordeão.

Como Configurar um Grupo¶

Para usar Grupos, você basicamente cria um Grupo como um controle de contêiner e, em seguida, especifica controles individuais que deseja que residam no Grupo.

1. Navegue até a página onde deseja configurar o Grupo.
2. Vá para Gaveta de ação > Live Designer.
3. Selecione o painel na visualização do projeto.
4. Clique no botão + Controle.
5. Atribua um Nome para o grupo.
6. Selecione Grupo como Tipo de controle.

7. Defina Tipo de layout. Por exemplo: Lado a Lado.

   • Empilhados: Coloca os controles em linhas separadas, empilhando um em cima do outro.
   • Lado a Lado: Coloca os controles um ao lado do outro ou lado a lado.

8. Clique em Avançar.

9. Revise as informações e clique em Concluir.
10. Clique na aba Todos os controles.
11. Para cada controle que você deseja dentro do Grupo, defina o valor Parent como o valor do Grupo nomeado.

12. Para configuração adicional, clique no ícone de registro aberto do controle Grupo.

    • A aba Propriedades do Controle permite alterar o Nome do Controle, alterar o Tipo de Controle, alterar o Tipo de Layout, definir se as Bordas do Grupo serão exibidas, definir o controle como aberto por padrão (nas versões 3.3. 34390+) e também defina o controle como Ativo ou Inativo.
    • A aba Posição e Largura permite ajustar onde o Grupo aparece no painel, quanta largura é alocada e Alinhamento.
    • A aba Label permite definir a visibilidade do rótulo, substituir o valor do rótulo e definir o tipo de rótulo como lado a lado ou empilhado no campo de controle correspondente.
    • A aba Edge Case permite que você insira o texto Hover (Ajuda) que aparecerá quando um usuário passar o mouse sobre o campo.

Método de Dimensionamento de Compactação e Expansão¶

Se você estiver usando um tipo de layout Lado a lado para um grupo, o Vinyl fornecerá opções de Método de dimensionamento para configurar:

• Compactar: Flutua o contêiner Grupo para a esquerda e dimensiona os controles com base no conteúdo. O valor Width pode ser usado para substituir a largura de controle que o Vinyl calcula.
• Expandir: Dimensiona os controles contidos no Grupo para preencher a largura disponível. A configuração Largura pode ser usada para ajustar os tamanhos calculados pelo Vinyl. Observe que os tipos de controle de botão, ícone e imagem não serão redimensionados para preencher a largura ao usar esta configuração.