Layout do contêiner

Use Layouts de contêiner para criar um layout de aplicativo complexo.

Quando o controle do layout de um contêiner é adicionado, por padrão, um único contêiner fica disponível. Para adicionar mais contêineres simples, clique no ícone "+" junto aos contêineres existentes.

Para reposicionar um contêiner dentro do layout, arraste e solte o contêiner na posição desejada.

Para redimensionar contêineres, arraste o canto do contêiner.

Para excluir um contêiner, selecione-o e use a tecla Excluir em seu teclado. Como alternativa, na visualização em árvore, clique com o botão direito do mouse no contêiner e selecione Excluir.

O controle de layout de contêiner tem dois conjuntos de propriedades.

• Um conjunto para o layout de contêiner

• Um conjunto para cada contêiner dentro do layout

Observação:

Recomendamos usar controles Layout de contêiner em um nível de página, para estruturar a página em diferentes seções.

Para alinhar e posicionar controles dentro de uma página, use controles Contêiner.

Importante: para fácil manutenção e consistência entre o tempo de design e o tempo de execução, evite aninhar layouts de contêiner.

Propriedades de layout de contêiner

Geral

• Oculto — se verdadeiro, oculta o controle no tempo de execução.

• Desabilitado — se verdadeiro, desabilita o controle no tempo de execução.

Events

Não há eventos.

Estilo

• Cor de fundo — a cor de segundo plano do layout.
• Fonte — a família de fontes para o layout do contêiner. Todos os contêineres dentro do layout compartilham a mesma família de fontes.
• Margem — define a margem do layout. Por padrão, uma margem de 0px é definida. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem.
• Preenchimento — o preenchimento do layout. Por padrão, é definido um preenchimento de 0px. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Preenchimento.
• Tamanho — a largura e a altura do layout. Sendo padrão, a Largura é definida como 100px, enquanto a Altura é definida como auto, para permitir que o layout seja expandido com base nos contêineres internos.

Container Properties

Geral

• Dica de ferramentas — dica de ferramenta a ser exibida no contêiner. Use a dica para fornecer informações adicionais sobre o controle.

• Oculto — se verdadeiro, oculta o controle no tempo de execução.

• Desabilitado — se verdadeiro, desabilita o controle no tempo de execução.

Events

• Clicando em — Configure o que acontece ao se clicar no contêiner.

Estilo

• Layout — Determine como os controles dentro do contêiner serão posicionados:

  • Horizontal/Vertical — a orientação dos controles.
  • Alinhamento — o alinhamento de controles dentro do contêiner.
  • Permitir encapsulamento — se selecionado, encapsula os controles no contêiner.

  • Permitir rolagem — se selecionado, permite a rolagem dentro do contêiner.

• Cor de fundo — a cor em segundo plano do contêiner.
• Borda — define a borda do controle. Espessura, cor e raio da borda podem ser configurados.
• Fonte — a família de fontes para o layout do contêiner. Todos os controles dentro do contêiner compartilham a mesma família de fontes. Por padrão, o controle herda a família de fontes do contêiner pai imediato, que é indicado pela palavra-chave “herdado”.
• Margem — define a margem do layout. Por padrão, uma margem de 0px é definida. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem.
• Preenchimento — o preenchimento do layout. Por padrão, é definido um preenchimento de 0px. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Preenchimento.

• Avançado — exibe as propriedades Flex do controle.

  • Base flexível - Define o tamanho original de um item flexível antes que o espaço extra seja distribuído ou retirado (px, %, em, auto).

  • crescimento Flex - Quando o espaço extra está disponível, esses valores determinam quanto um item flexível deve crescer em relação ao restante dos itens.

  • Redução Flex - Quando o espaço não é suficiente, esse valor determina o quanto um item flexível deve encolher em comparação com os outros itens.

    Para obter detalhes, consulte a documentação do Mozilla Developer Network.